@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">Surat Tugas Baru</h1>
        {{-- <a href="{{url('usulan/create')}}" class="btn btn-primary float-right">Buat Usulan Baru</a> --}}
      </div>
    </div>
  </div>
</section>

<section class="content">


  <!-- Modal -->
  <div class="modal fade" id="wajibDiIsi" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content bg-danger">
        <div class="modal-header">
          <h5 class="modal-title" id="wajibDiIsi">Wajib Di Isi</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Formulir di Bawah Ini Wajib Di isi !!!
          <p id="detailWajibIsi"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-light" data-dismiss="modal">Ok</button>
        </div>
      </div>
    </div>
  </div>

  <form method="post" autocomplete="off">
    @csrf
    <input type="hidden" name="tgl_awal" id="tgl_awal" value="{{date('d/m/Y')}}">
    <input type="hidden" name="tgl_akhir" id="tgl_akhir" value="{{date('d/m/Y')}}">
    <input type="hidden" name="hari_kegiatan" id="hari_kegiatan" value="1">
    <input type="hidden" name="surat_tugas_monev_id" id="id_monev_surat_tugas_terpilih_id" value="">
    <!-- Default box -->
    <div class="card">
      <div class="card-body">
        @include('layouts.success_error')

        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="nomor_surat">Nomor Surat</label>
              <input type="text" class="form-control" value="DRAFT" disabled>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="tgl_surat">Tgl Surat</label>
              <input type="text" name="tgl_surat" id="tgl_surat" class="form-control datepicker"
                placeholder="Masukan Tgl Surat" value="{{old('tgl_surat')}}" >
              @error('tgl_surat')
              <small class="form-text text-danger">{{ $message }}</small>
              @enderror
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="kode_blangko_id">Kode Blangko</label>
              <select class="form-control" name="kode_blangko_id" id="kode_blangko_id" >
                <option value="">--Pilih Blangko--</option>
                @foreach ($kode_blangko as $u)
                <option value="{{$u->id}}">{{$u->nama}}</option>
                @endforeach
              </select>
              @error('kode_blangko_id')
              <small class="form-text text-danger">{{ $message }}</small>
              @enderror
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="isi">Jenis Surat</label>
              <select class="form-control" name="jenis_surat_id" id="jenis_surat_id" >
                <option value="">--Pilih Jenis Surat--</option>
                @foreach ($jenis_surat as $u)
                <option value="{{$u->id}}">{{$u->nama}}</option>
                @endforeach
              </select>
              @error('jenis_surat_id')
              <small class="form-text text-danger">{{ $message }}</small>
              @enderror
            </div>
          </div>
        </div>

        <div id="bilaPengawasanReguler" style="display:none;">
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="tgl_kegiatan">Tgl Kegiatan</label>
                <input type="text" name="tgl_kegiatan" id="tgl_kegiatan" class="form-control datepickerrange"
                  placeholder="Masukan Tgl Surat" value="{{old('tgl_kegiatan')}}" >
                @error('tgl_kegiatan')
                <small class="form-text text-danger">{{ $message }}</small>
                @enderror
              </div> 
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label for="tgl_kegiatan">Total Hari</label>
                <h6 class="form-control border-0 pl-0" id="totalHariKegiatan"><span class="font-weight-bold"><span id="jumlahHariKegiatan">1</span> Hari</span> setelah dikurangi hari libur</h6>
              </div> 
            </div>
          </div>
        </div>

        <div id="bilaMonev" style="display:none;">
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="monev_surat_tugas_id">Pilih Surat Tugas</label>
                <select class="form-control monev_surat_tugas_class"></select>
                {{-- <input type="text" name="monev_surat_tugas_id" id="monev_surat_tugas_id" class="form-control datepickerrange"
                  placeholder="Pilih No Surat Tugas" value="{{old('monev_surat_tugas_id')}}" >
                @error('monev_surat_tugas_id')
                <small class="form-text text-danger">{{ $message }}</small>
                @enderror --}}
              </div> 
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label for="monev_surat_tugas_terpilih_id">Monitoring Evaluasi Surat Tugas</label>
                <h6 class="form-control border-0 pl-0" id="monev_surat_tugas_terpilih_id"><span class="font-weight-bold"><span id="no_monev_surat_tugas_terpilih_id">-</span></span> | <span id="jenis_monev_surat_tugas_terpilih_id">-</span></h6>
              </div> 
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 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-nippeg="{{$u->nip}}"
                            data-nama = "{{$u->gelar_depan.' '.$u->nama_lengkap.' '.$u->gelar_belakang}}"
                            data-satker = "{{$u->satker}}"
                            @if($u->jabatan == 'PPNPN')
                            data-pangkat = "-"
                            @else
                            data-pangkat = "{{$u->pangkat.' ('.$u->golongan.')'}}"
                            @endif
                            data-jabatan = "{{$u->jabatan}}"
                            >Pilih</button></td>--}}
                            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">
              <h5 class="text-center">Belum Ada Pegawai</h5>
            </div>
          </div>
        </div>
      </div>

      {{-- <div class="overlay">
        <div class="spinner-border text-primary" role="status">
          <span class="sr-only">Loading...</span>
        </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">
              <h5 class="text-center">Belum Ada Format</h5>
            </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">
              <h5 class="text-center">Belum Ada Format</h5>
            </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">
              <h5 class="text-center">Belum Ada Format</h5>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="instansiLainId" tabindex="-1" role="dialog" aria-labelledby="instansiLainTitleId"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Masukan Instansi Lain</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="text" class="form-control" id="nama_instansi_lain"
                      placeholder="Masukan Nama Instansi Lain" >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-secondary" id="instansiLainSimpan" data-dismiss="modal">Simpan</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="satkerListId" tabindex="-1" role="dialog" aria-labelledby="satkerListTitleId"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Pilih Satker</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_satker" placeholder="Cari Satker ...">
                  </div>

                  <table class="table table-bordered" id="list_satker">
                    <thead>
                      <tr>
                        <th>Kode</th>
                        <th>Nama</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($satker as $u)
                      <tr>
                        <td>{!! $u->kode !!}</td>
                        <td>{!! $u->nama !!}</td>
                        <td><button class="btn btn-primary btn-sm btn-block btn-satker" class="text-center"
                            type="button" data-dismiss="modal" data-id_satker="{{$u->id}}"
                            data-kode_satker="{{$u->kode}}" data-nama_satker="{{$u->nama}}">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">Close</button>
          </div>
        </div>
      </div>
    </div>

    <div class="card" id="card_satker_id">
      <div class="card-header">
        <h3 class="card-title">Satker</h3>
        <div class="card-tools">

          <div class="d-flex justify-content-end align-items-center">
            <div class="form-group form-check mb-0">
              <input type="checkbox" class="form-check-input" id="idTanpaSatker" name="tanpasakter" value="1">
              <label class="form-check-label" for="idTanpaSatker">Tanpa Satker</label>
            </div>


            <button type="button" class="btn btn-warning btn-sm mx-2" id="idBtnPilihInstansi" data-toggle="modal" data-target="#instansiLainId">
              <i class="fas fa-plus"></i> Instansi Lain
            </button>

            <button type="button" class="btn btn-primary btn-sm" id="idBtnPilihSatker" data-toggle="modal" data-target="#satkerListId">
              <i class="fas fa-plus"></i> Tambah
            </button>
          </div>

        </div>
      </div>
      <div class="card-body">
        <div class="row">

          <div class="col-12">
            <div id="frameTableSatker">
              <h5 class="text-center">Belum Ada Satker</h5>
            </div>
          </div>

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

    <div class="modal fade" id="satkerMonevListId" tabindex="-1" role="dialog" aria-labelledby="satkerMonevListTitleId"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Pilih Satker</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">
                  <table class="table table-bordered" id="list_satker_monev">
                    <thead>
                      <tr>
                        <th>Nama</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                    </thead>
                    <tbody id="list_monev">
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <div class="card" id="card_satker_monev_id">
      <div class="card-header">
        <h3 class="card-title">Satker Monitoring Evaluasi</h3>
        <div class="card-tools">

          <div class="d-flex justify-content-end align-items-center">
            <button type="button" class="btn btn-primary btn-sm" id="idBtnPilihSatkerMonev" data-toggle="modal" data-target="#satkerMonevListId">
              <i class="fas fa-plus"></i> Tambah
            </button>
          </div>

        </div>
      </div>
      <div class="card-body">
        <div class="row">

          <div class="col-12">
            <div id="frameTableSatkerMonev">
              <h5 class="text-center">Belum Ada Satker</h5>
            </div>
          </div>

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

    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <label for="isi">Lokasi</label>
              <input type="text" name="lokasi" class="form-control" placeholder="Masukan Lokasi">
              @error('isi')
              <small class="form-text text-danger">{{ $message }}</small>
              @enderror
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Pejabat Penandatangan -->
    <div class="modal fade" id="pejabatId" tabindex="-1" role="dialog" aria-labelledby="pejabatTitleId" 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 Pejabat</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_pejabat" placeholder="Cari Nama / Nip..">
                  </div>

                  <table class="table table-bordered" id="list_pejabat">
                    <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-pejabat" class="text-center" type="button" data-dismiss="modal" 
                          data-nippeg="{{$u->nip}}"
                          data-nama = "{{$u->gelar_depan.' '.$u->nama_lengkap.' '.$u->gelar_belakang}}"
                          data-satker = "{{$u->satker}}"
                          data-pangkat = "{{$u->pangkat.' ('.$u->golongan.')'}}"
                          data-jabatan = "{{$u->jabatan}}"
                          >Pilih</button></td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>

                  

                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="pejabatJenis">Jenis Pejabat Penanda Tangan</label>
                    <select class="form-control" id="pejabatJenis">
                      <option value="Ketua">Ketua</option>
                      <option value="PLT Ketua">PLT Ketua</option>
                      <option value="Wakil Ketua">Wakil Ketua</option>
                      <option value="PLT Wakil Ketua">PLT Wakil Ketua</option>
                    </select>
                  </div>
                </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" id="card-pejabat">
      <div class="card-header">
        <h3 class="card-title">Pejabat Penanda Tangan</h3>
        <div class="card-tools">
          
          <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#pejabatId">
            <i class="fas fa-plus"></i> Tambah
          </button>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-12">
            <div id="frameTablePejabatDiTugaskan">
              <h5 class="text-center">Belum Ada Pejabat Terpilih</h5>
            </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="textarea" id="tembusan_input" class="form-control"/>
			  <!--<textarea name="tembusan_input" id="tembusan_input" class="form-control" rows="4" cols="50"></textarea>-->
            </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">
              <h5 class="text-center">Belum Ada Tembusan</h5>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Default box -->
    <div class="card">
      <div class="card-body">
        @include('layouts.success_error')

        <div class="row">

          <div class="col-sm-12">
            <button type="submit" class="btn btn-primary float-right">Simpan</button>
          </div>
        </div>
      </div>
    </div>

  </form>
  <!-- /.card -->

</section>
@endsection


@section('js')
<script>
  
  var getDaysBetweenDates = function(startDate, endDate) {
        var now = startDate.clone(), dates = [];
  
        while (now.isSameOrBefore(endDate)) {
            dates.push(now.format('YYYY-MM-DD'));
            now.add(1, 'days');
        }
        return dates;
    };
  
  var is_weekend =  function(date1){
    var dt = new Date(date1);
      if(dt.getDay() == 6 || dt.getDay() == 0)
      {
        return "weekend";
      } 
  }

  function formatRepo (repo) {
    if (repo.loading) {
   
      return repo.text;
    }

    var $container = $(
      "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__meta'>" +
          "<div class='select2-result-repository__title font-weight-bold h6 mb-0'></div>" +
          "<div class='select2-result-repository__jenis_surat'></div>" +
          "<div class='select2-result-repository__tgl_surat pr-2'><strong>Tgl Surat:</strong> </div>" +
        "</div>" +
      "</div>"
    );

    $container.find(".select2-result-repository__title").text(repo.nomor_surat);
    $container.find(".select2-result-repository__jenis_surat").text(repo.jenis_surat);
    $container.find(".select2-result-repository__tgl_surat").append(repo.tgl_surat);

    return $container;
  }

  function formatRepoSelection (repo) {

    console.log(repo);
    if (!repo.id) {
      return repo.text;
    }
    $('#id_monev_surat_tugas_terpilih_id').val(repo.id);
    $('#no_monev_surat_tugas_terpilih_id').text(repo.nomor_surat);
    $('#jenis_monev_surat_tugas_terpilih_id').text(repo.jenis_surat);

    let isi_list_monev = '';

    $.each(repo.satker, function(i, item) {
      isi_list_monev += '<tr>';
      isi_list_monev += '<td>'+item.satker_nama+'</td>';
      isi_list_monev  += `<td><button class="btn btn-primary btn-sm btn-block btn-satker-monev" class="text-center"
                            type="button" data-dismiss="modal" data-id_satker_monev="`+item.id+`"
                            data-nama_satker_monev="`+item.satker_nama+`">Pilih</button></td>`;
      isi_list_monev += '</tr>';
    });

    $('#list_monev').html(isi_list_monev);
    $('#card_satker_monev_id').show();
    return repo.nomor_surat || repo.text;
  }

  $(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>`;

    $('.datepicker').daterangepicker({
            locale: {format: 'DD/MM/YYYY'},
            singleDatePicker: true,
            "autoApply": true,
        });

    $('.datepickerrange').daterangepicker({
            locale: {format: 'DD/MM/YYYY'},
            "autoApply": true,
        }, function(start, end, label) {
      console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
      
      $('#tgl_awal').val(start.format('DD/MM/YYYY'));
      $('#tgl_akhir').val(end.format('DD/MM/YYYY'));

      var samaTahun = (start.format('YYYY') == end.format('YYYY'));
      var startDate = moment(start.format('YYYY-MM-DD'));
      var endDate = moment(end.format('YYYY-MM-DD'));
      var dateList = getDaysBetweenDates(startDate, endDate);
      var listharilibur = [];
      var adata = '';

      $.ajax({
        type: "GET",
        url: "https://kalenderindonesia.com/api/API1npzEyAaW1/libur/masehi/"+start.format('YYYY'),
        dataType: 'json',
        success: function (result, status, xhr) {
          for (var i = 1, i_len = 13; i < i_len; i++) {
            if (result.data.holiday[i].count > 0) {
              for (var x = 0, x_len = result.data.holiday[i].data.length; x < x_len; x++) {
                //console.log(result.data.holiday[i].data[x].date);
                //listharilibur.push(result.data.holiday[i].data[x].date);
                adata = result.data.holiday[i].data[x].date;
                  listharilibur.push(adata.trim());

              }
            }
          }

          console.log(listharilibur.length);

          if (!samaTahun) {
            $.ajax({
              type: "GET",
              url: "https://kalenderindonesia.com/api/API1npzEyAaW1/libur/masehi/"+end.format('YYYY'),
              dataType: 'json',
              success: function (result, status, xhr) {
                for (var i = 1, i_len = 13; i < i_len; i++) {
                  if (result.data.holiday[i].count > 0) {
                    for (var x = 0, x_len = result.data.holiday[i].data.length; x < x_len; x++) {
                      //console.log(result.data.holiday[i].data[x].date);
                      adata = result.data.holiday[i].data[x].date;
                      listharilibur.push(adata.trim());
                    }
                  }
                }

                //console.log(listharilibur);
              },
              error: function (xhr, status, error) {
                  alert(error);
              },
              complete: function () {
                //
              }
            });
          }

          var totalLibur = 0;

          for (var x = 0, x_len = dateList.length; x < x_len; x++) {
            if (is_weekend(dateList[x]) || (listharilibur.indexOf(dateList[x]) > -1)) {
              totalLibur = totalLibur + 1;
            }
          }
          console.log(totalLibur);
          
          $('#jumlahHariKegiatan').text(dateList.length-totalLibur);
          $('#hari_kegiatan').val(dateList.length-totalLibur);
        },
        error: function (xhr, status, error) {
            alert(error);
        },
        complete: function () {
          //
        }
      });
    });

    // 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;
              }
  
              $('#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>`+apiSatker+`</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>`
              );
  
            },
            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');

              $('#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>`+apiSatker+`</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>`
              );
            },
            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;
              }

            $('#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>Satker</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>`+apiSatker+`</td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );

          },
          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');

              $('#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>Satker</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>`+apiSatker+`</td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
              );

          },
          complete: function () {
            $('.loadiv').remove();
          }
      });
      }
    });*/
	
	$('.btn-pegawai').on("click", function() {
      
      var nippeg = $(this).data('nippeg');
      let that = $(this);
      apiNama="";
      apiSatker="";
      apiPangkat="";
      apiJabatan="";
  
      if ($('#tablePegawaiDiTugaskan').length){
  
        var hasilCariPegawai = $('#tablePegawaiDiTugaskan tr > td:contains('+nippeg+')').length;
        if (hasilCariPegawai <= 0) {
  
          apiNama = that.data('nama');
          apiSatker = that.data('satker');
          apiPangkat = that.data('pangkat');
          apiJabatan = that.data('jabatan');
  
          $('#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>`+apiSatker+`</td>
                  <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
              </tr>`
          );
        }
      } else {
          apiNama = that.data('nama');
          apiSatker = that.data('satker');
          apiPangkat = that.data('pangkat');
          apiJabatan = that.data('jabatan');
  
          $('#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>Satker</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>`+apiSatker+`</td>
                  <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>
              </tbody>
              </table>`
          );
  
      }
    });

    $(document).on('click','.btn-hapus-pegawai',function(){
      
      $(this).closest("tr").remove();

      if ($('#tablePegawaiDiTugaskanTbody tr').length == 0){
        $('#frameTablePegawaiDiTugaskan').html('<h5 class="text-center">Belum Ada Pegawai</h5>');
      }
    });

  
  // FORMAT MENINMBANG
  ClassicEditor
    .create( document.querySelector( '.tableFormatMenimbangTbodyIsi' ) )
    .catch( error => {
        console.error( error );
  } );

  $("#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 idformatmenimbang = $(this).data('id_format_menimbang');
      var isiformatmenimbang = $(this).data('isi_format_menimbang');

      if ($('#tableFormatMenimbang').length){

        var hasilCariFormatMenimbang = $('#tableFormatMenimbang tr > td:contains(t_id'+idformatmenimbang+')').length;

        if (hasilCariFormatMenimbang <= 0) {
     
              $('#tableFormatMenimbangTbody').append(
                ` <tr>
                    <td class="d-none">t_id`+idformatmenimbang+`</td>
                    <td><textarea id="tableFormatMenimbangTbodyIsi`+idformatmenimbang+`" name="format_menimbang[]">`+isiformatmenimbang+`</textarea></td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_menimbang" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>`
              );

              ClassicEditor
            .create( document.querySelector( '#tableFormatMenimbangTbodyIsi'+idformatmenimbang ) )
            .catch( error => {
                console.error( error );
            } );
  
        }
      } else {
 
            $('#frameTableFormatMenimbang').html(
              ` <table class="table table-bordered" id="tableFormatMenimbang">
                  <thead>
                      <tr>
                        <th class="d-none">id</th>
                        <th>Isi</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                  </thead>
                  <tbody id="tableFormatMenimbangTbody">
                    <tr>
                      <td class="d-none">t_id`+idformatmenimbang+`</td>
                      <td><textarea id="tableFormatMenimbangTbodyIsi`+idformatmenimbang+`" name="format_menimbang[]">`+isiformatmenimbang+`</textarea></td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_menimbang" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );

            ClassicEditor
            .create( document.querySelector( '#tableFormatMenimbangTbodyIsi'+idformatmenimbang ) )
            .catch( error => {
                console.error( error );
            } );

      }
    });

    $(document).on('click','.btn-hapus-format_menimbang',function(){
      
      $(this).closest("tr").remove();

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

  // FORMAT DASAR
  ClassicEditor
    .create( document.querySelector( '.tableFormatDasarTbodyIsi' ) )
    .catch( error => {
        console.error( error );
  } );

  $("#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 idformatdasar = $(this).data('id_format_dasar');
      var isiformatdasar = $(this).data('isi_format_dasar');

      if ($('#tableFormatDasar').length){

        var hasilCariFormatDasar = $('#tableFormatDasar tr > td:contains(t_id'+idformatdasar+')').length;

        if (hasilCariFormatDasar <= 0) {
     
              $('#tableFormatDasarTbody').append(
                ` <tr>
                    <td class="d-none">t_id`+idformatdasar+`</td>
                    <td><textarea id="tableFormatDasarTbodyIsi`+idformatdasar+`" name="format_dasar[]">`+isiformatdasar+`</textarea></td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_dasar" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>`
              );

              ClassicEditor
            .create( document.querySelector( '#tableFormatDasarTbodyIsi'+idformatdasar ) )
            .catch( error => {
                console.error( error );
            } );
  
        }
      } else {
 
            $('#frameTableFormatDasar').html(
              ` <table class="table table-bordered" id="tableFormatDasar">
                  <thead>
                      <tr>
                        <th class="d-none">id</th>
                        <th>Isi</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                  </thead>
                  <tbody id="tableFormatDasarTbody">
                    <tr>
                      <td class="d-none">t_id`+idformatdasar+`</td>
                      <td><textarea id="tableFormatDasarTbodyIsi`+idformatdasar+`" name="format_dasar[]">`+isiformatdasar+`</textarea></td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_dasar" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );

            ClassicEditor
            .create( document.querySelector( '#tableFormatDasarTbodyIsi'+idformatdasar ) )
            .catch( error => {
                console.error( error );
            } );

      }
    });

    $(document).on('click','.btn-hapus-format_dasar',function(){
      
      $(this).closest("tr").remove();

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

  // FORMAT TUJUAN
  ClassicEditor
    .create( document.querySelector( '.tableFormatTujuanTbodyIsi' ) )
    .catch( error => {
        console.error( error );
  } );

  $("#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 idformattujuan = $(this).data('id_format_tujuan');
      var isiformattujuan = $(this).data('isi_format_tujuan');

      if ($('#tableFormatTujuan').length){

        var hasilCariFormatTujuan = $('#tableFormatTujuan tr > td:contains(t_id'+idformattujuan+')').length;

        if (hasilCariFormatTujuan <= 0) {
     
              $('#tableFormatTujuanTbody').append(
                ` <tr>
                    <td class="d-none">t_id`+idformattujuan+`</td>
                    <td><textarea id="tableFormatTujuanTbodyIsi`+idformattujuan+`" name="format_tujuan[]">`+isiformattujuan+`</textarea></td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_tujuan" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>`
              );

              ClassicEditor
            .create( document.querySelector( '#tableFormatTujuanTbodyIsi'+idformattujuan ) )
            .catch( error => {
                console.error( error );
            } );
  
        }
      } else {
 
            $('#frameTableFormatTujuan').html(
              ` <table class="table table-bordered" id="tableFormatTujuan">
                  <thead>
                      <tr>
                        <th class="d-none">id</th>
                        <th>Isi</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                  </thead>
                  <tbody id="tableFormatTujuanTbody">
                    <tr>
                      <td class="d-none">t_id`+idformattujuan+`</td>
                      <td><textarea id="tableFormatTujuanTbodyIsi`+idformattujuan+`" name="format_tujuan[]">`+isiformattujuan+`</textarea></td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_tujuan" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );

            ClassicEditor
            .create( document.querySelector( '#tableFormatTujuanTbodyIsi'+idformattujuan ) )
            .catch( error => {
                console.error( error );
            } );

      }
    });

    $(document).on('click','.btn-hapus-format_tujuan',function(){
      
      $(this).closest("tr").remove();

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

    
    $(document).on('click','#idTanpaSatker',function(){
      
     $('#idBtnPilihInstansi').prop('disabled', ($('#idTanpaSatker:checked').length > 0));
     $('#idBtnPilihSatker').prop('disabled', ($('#idTanpaSatker:checked').length > 0));
    });

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

    $('.btn-satker').on("click", function() {
      
      var idsatker = $(this).data('id_satker');
      var kodesatker = $(this).data('kode_satker');
      var namasatker = $(this).data('nama_satker');

      if ($('#tableSatker').length){

        var hasilCariSatker = $('#tableSatker tr > td:contains(t_id'+idsatker+')').length;

        if (hasilCariSatker <= 0) {
     
              $('#tableSatkerTbody').append(
                ` <tr>
                  <input type="hidden" name="satker[]" value="`+idsatker+`">
                    <td class="d-none">t_id`+idsatker+`</td>
                    <td>`+kodesatker+`</td>
                    <td>`+namasatker+`</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-hapus-satker" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>`
              );
        }
      } else {
 
            $('#frameTableSatker').html(
              ` <table class="table table-bordered" id="tableSatker">
                <thead>
                      <tr>
                        <th class="d-none">id</th>
                        <th style="width:150px;">Kode</th>
                        <th>Nama</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                  </thead>
                  <tbody id="tableSatkerTbody">
                    <tr>
                      <input type="hidden" name="satker[]" value="`+idsatker+`">
                      <td class="d-none">t_id`+idsatker+`</td>
                      <td>`+kodesatker+`</td>
                      <td>`+namasatker+`</td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-satker" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );
      }

      $('#idTanpaSatker').prop('disabled',true);
    });

    $(document).on('click','.btn-hapus-satker',function(){
      
      $(this).closest("tr").remove();

      if ($('#tableSatkerTbody tr').length == 0){
        $('#idTanpaSatker').prop('disabled',false);
        $('#frameTableSatker').html('<h5 class="text-center">Belum Ada Satker</h5>');
      }
    });
    // AKHIR SATKER

    // SATKER MONEV

    $(document).on("click",".btn-satker-monev",function() {
      
      var idsatkermonev = $(this).data('id_satker_monev');
      var namasatkermonev = $(this).data('nama_satker_monev');

      if ($('#tableSatkerMonev').length){

        var hasilCariSatkerMonev = $('#tableSatkerMonev tr > td:contains(t_id'+idsatkermonev+')').length;

        if (hasilCariSatkerMonev <= 0) {
     
              $('#tableSatkerMonevTbody').append(
                ` <tr>
                  <input type="hidden" name="satker_monev[]" value="`+idsatkermonev+`">
                    <td class="d-none">t_id`+idsatkermonev+`</td>
                    <td>`+namasatkermonev+`</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-hapus-satker-monev" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>`
              );
        }
      } else {
 
            $('#frameTableSatkerMonev').html(
              ` <table class="table table-bordered" id="tableSatkerMonev">
                <thead>
                      <tr>
                        <th class="d-none">id</th>
                        <th>Nama</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                  </thead>
                  <tbody id="tableSatkerMonevTbody">
                    <tr>
                      <input type="hidden" name="satker_monev[]" value="`+idsatkermonev+`">
                      <td class="d-none">t_id`+idsatkermonev+`</td>
                      <td>`+namasatkermonev+`</td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-satker-monev" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );
      }
    });

    $(document).on('click','.btn-hapus-satker-monev',function(){
      
      $(this).closest("tr").remove();

      if ($('#tableSatkerMonevTbody tr').length == 0){
        $('#idTanpaSatkerMonev').prop('disabled',false);
        $('#frameTableSatkerMonev').html('<h5 class="text-center">Belum Ada Satker</h5>');
      }
    });
    // AKHIR SATKER MONEV

    // AWAL INSTANSI LAIN
    $('#instansiLainSimpan').click(function(){
      
      console.log("test me");

      var namaInstansiLain = $('#nama_instansi_lain').val();
      
      $('#nama_instansi_lain').val('');

      if ( namaInstansiLain.trim() == '') {
        exit();
      }

      if ($('#tableSatker').length){

        var hasilInstansiLain = $('#tableInstansiLain tr > td:contains(t_id'+namaInstansiLain+')').length;

        if (hasilInstansiLain <= 0) {

              $('#tableSatkerTbody').append(
                ` <tr>
                  <input type="hidden" name="satker[]" value="`+namaInstansiLain+`">
                    <td class="d-none">t_id`+namaInstansiLain+`</td>
                    <td>Instansi Lain</td>
                    <td>`+namaInstansiLain+`</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-hapus-satker" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                  </tr>`
              );

        }
        } else {

            $('#frameTableSatker').html(
              ` <table class="table table-bordered" id="tableSatker">
                  <thead>
                      <tr>
                        <th class="d-none">id</th>
                        <th style="width:150px;">Kode</th>
                        <th>Nama</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                  </thead>
                  <tbody id="tableSatkerTbody">
                    <tr>
                      <input type="hidden" name="satker[]" value="`+namaInstansiLain+`">
                      <td class="d-none">t_id`+namaInstansiLain+`</td>
                      <td>Instansi Lain</td>
                      <td>`+namaInstansiLain+`</td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-satker" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );

        }

      $('#idTanpaSatker').prop('disabled',true);
     
    });

    // AKHIR INSTANSI LAIN

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

    $('.btn-pejabat').on("click", function() {
      
      var nippeg = $(this).data('nippeg');
      let that = $(this);
      var apiJenis= $('#pejabatJenis').val();

      token='JowpMl_3D-mE5f3z7yCBCgOqxR7k9uNmN6ITELxL';
      apiNama="";
      apiSatker="";
      apiPangkat="";
      apiJabatan="";
      
        $('#card-pejabat').append(loadiv);

        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) {
            //console.log('sukses');

            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.kelompok_jabatan;
              }

            

            $('#frameTablePejabatDiTugaskan').html(
              ` <table class="table table-bordered" id="tablePejabatDiTugaskan">
                  <thead>
                      <tr>
                        <th style="width:100px;">Nip</th>
                        <th>Nama</th>
                        <th>Pangkat</th>
                        <th>Jabatan</th>
                        <th>Satker</th>
                        <th>Jenis</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                  </thead>
                  <tbody id="tablePejabatDiTugaskanTbody">
                    <tr>
                      <input type="hidden" name="pejabat_nip" value="`+nippeg+`">
                      <input type="hidden" name="pejabat_nama" value="`+apiNama+`">
                      <input type="hidden" name="pejabat_pangkat" value="`+apiPangkat+`">
                      <input type="hidden" name="pejabat_jabatan" value="`+apiJabatan+`">
                      <input type="hidden" name="pejabat_satker" value="`+apiSatker+`">
                      <input type="hidden" name="pejabat_jenis" value="`+apiJenis+`">
                      <td>`+nippeg+`</td>
                      <td>`+apiNama+`</td>
                      <td>`+apiPangkat+`</td>
                      <td>`+apiJabatan+`</td>
                      <td>`+apiSatker+`</td>
                      <td>`+apiJenis+`</td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pejabat" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );

          },
          error: function (xhr, status, error) {
              apiNama = that.data('nama');
              apiSatker = that.data('satker');
              apiPangkat = that.data('pangkat');
              apiJabatan = that.data('jabatan');

              //console.log('gagal');
              //console.log(result);

              $('#frameTablePejabatDiTugaskan').html(
              ` <table class="table table-bordered" id="tablePejabatDiTugaskan">
                  <thead>
                      <tr>
                        <th style="width:100px;">Nip</th>
                        <th>Nama</th>
                        <th>Pangkat</th>
                        <th>Jabatan</th>
                        <th>Satker</th>
                        <th>Jenis</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                  </thead>
                  <tbody id="tablePejabatDiTugaskanTbody">
                    <tr>
                      <input type="hidden" name="pejabat_nip" value="`+nippeg+`">
                      <input type="hidden" name="pejabat_nama" value="`+apiNama+`">
                      <input type="hidden" name="pejabat_pangkat" value="`+apiPangkat+`">
                      <input type="hidden" name="pejabat_jabatan" value="`+apiJabatan+`">
                      <input type="hidden" name="pejabat_satker" value="`+apiSatker+`">
                      <input type="hidden" name="pejabat_jenis" value="`+apiJenis+`">
                      <td>`+nippeg+`</td>
                      <td>`+apiNama+`</td>
                      <td>`+apiPangkat+`</td>
                      <td>`+apiJabatan+`</td>
                      <td>`+apiSatker+`</td>
                      <td>`+apiJenis+`</td>
                      <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pejabat" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                    </tr>
                  </tbody>
                </table>`
            );

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

    $(document).on('click','.btn-hapus-pejabat',function(){
      
      $(this).closest("tr").remove();

      if ($('#tablePejabatDiTugaskanTbody tr').length == 0){
        $('#frameTablePejabatDiTugaskan').html('<h5 class="text-center">Belum Ada Pejabat Terpilih</h5>');
      }
    });

    // TEMBUSAN

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

      if ($('#tableTembusan').length){
        $('#tableTembusanTbody').append(
          ` <tr>
              <input type="hidden" name="tembusan[]" value="`+tembusan_input.val()+`">
              <td>`+tembusan_input.val()+`</td>
              <td><button class="btn btn-primary btn-sm btn-block btn-hapus-tembusan" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
            </tr>`
        );
      }
      else {
        $('#frameTableTembusan').html(
          ` <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">
                <tr>
                  <input type="hidden" name="tembusan[]" value="`+tembusan_input.val()+`">
                  <td>`+tembusan_input.val()+`</td>
                  <td><button class="btn btn-primary btn-sm btn-block btn-hapus-tembusan" class="text-center" type="button"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                </tr>
              </tbody>
            </table>`
        );
        }

        tembusan_input.val('');
    });

    $(document).on('click','.btn-hapus-tembusan',function(){
      
      $(this).closest("tr").remove();

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

    //PILIH JENIS SURAT
    $('#jenis_surat_id').on('change', function() {
      
      $('#bilaPengawasanReguler').hide();
      $('#bilaMonev').hide();
      $('#card_satker_id').show();
      $('#card_satker_monev_id').hide();

        switch(this.value) {
          case '2':
            $('#bilaPengawasanReguler').show();  
            break;
          case '6':
          $('#bilaPengawasanReguler').show();
            $('#bilaMonev').show();  
            $('#card_satker_id').hide();

            if($('#id_monev_surat_tugas_terpilih_id').val()) {
              $('#card_satker_monev_id').show();  
            }
            break;
          default:
            //
        }
    });

    $('.monev_surat_tugas_class').select2({
      ajax: {
        url: "{{url('api/surat-tugas/find_data')}}",
        dataType: 'json',
        delay: 250,
        data: function (params) {

          var query = {
            q: params.term
          }

          return query;
        },

        processResults: function (data, params) {
          params.page = params.page || 1;

          return {
            results: data.data.items,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        },

        cache: true
        
      },
      theme: 'bootstrap4',
      placeholder: 'Cari Nomor Surat Tugas',
      minimumInputLength: 3,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection
    });

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

    // ON SUBMIT
    $("form").submit(function(event){

      var pilihanIsian = '';

      if (! $('#tgl_surat').val()) {
        pilihanIsian = pilihanIsian+"- Tanggal Surat <br>";
      }

      if (! $('#kode_blangko_id').val()) {
        pilihanIsian = pilihanIsian+"- Kode Blangko <br>";
      }

      if (! $('#jenis_surat_id').val()) {
        pilihanIsian = pilihanIsian+"- Jenis Surat <br>";
      } else {
        if ($('#jenis_surat_id').val() == '6' && (!$('#id_monev_surat_tugas_terpilih_id').val())) {
          pilihanIsian = pilihanIsian+"- Pilih Surat Tugas <br>";
        }
      }

      if ($('#tablePegawaiDiTugaskan').length == 0){
        pilihanIsian = pilihanIsian+"- Pegawai yang ditugaskan <br>";
      }

      if ($('#tableFormatMenimbang').length == 0){
        pilihanIsian = pilihanIsian+"- Format Menimbang <br>";
      }

      if ($('#tableFormatDasar').length == 0){
        pilihanIsian = pilihanIsian+"- Format Dasar <br>";
      }

      if ($('#tableFormatTujuan').length == 0){
        pilihanIsian = pilihanIsian+"- Format Tujuan <br>";
      }

      if ($('#jenis_surat_id').val() != '6') {
        if ($('#tableSatker').length == 0){
          if ($('#idTanpaSatker:checked').length <= 0) {
            pilihanIsian = pilihanIsian+"- Satker <br>";
          }
        }
      }

      if ($('#tablePejabatDiTugaskan').length == 0){
        pilihanIsian = pilihanIsian+"- Pejabat Penanda Tangan <br>";
      }

      if (pilihanIsian !== '') {
        event.preventDefault();
        $('#detailWajibIsi').html(pilihanIsian);
        $('#wajibDiIsi').modal('show');
      } 

    });

  });
</script>
@endsection