@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">
    <!-- 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" name="nomor_surat" class="form-control" id="nomor_surat"
                placeholder="Masukan Nomor Surat" value="{{old('nomor_surat')}}" >
              @error('nomor_surat')
              <small class="form-text text-danger">{{ $message }}</small>
              @enderror
            </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>
    </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" 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="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_pegawai" placeholder="Cari Nama / Nip..">
                  </div>

                  <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_baru}}</td>
                        <td>{{$u->nama}}</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_baru}}">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" 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">
      <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="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" 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_baru}}</td>
                        <td>{{$u->nama}}</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_baru}}">Pilih</button></td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>

                  <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>

    <!-- 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";
      } 
  }

  $(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');

      token='JowpMl_3D-mE5f3z7yCBCgOqxR7k9uNmN6ITELxL';
      apiNama="";
      apiSatker="";
      apiPangkat="";
      apiJabatan="";

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

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

        var hasilCariPegawai = $('#tablePegawaiDiTugaskan tr > td:contains('+nippeg+')').length;
        if (hasilCariPegawai <= 0) {
          $.ajax({
            type: "GET",
            url: "https://sikep.mahkamahagung.go.id/api-pro/v1/training/pegawai/"+nippeg,
            headers: {
                Authorization: 'Bearer ' + token
            },
            dataType: 'json',
            success: function (result, status, xhr) {
              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) {
                alert(error);
            },
            complete: function () {
              $('.loadiv').remove();
            }
          });
        }
      } else {
        
        $.ajax({
          type: "GET",
          url: "https://sikep.mahkamahagung.go.id/api-pro/v1/training/pegawai/"+nippeg,
          headers: {
              Authorization: 'Bearer ' + token
          },
          dataType: 'json',
          success: function (result, status, xhr) {
            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);
          },
          complete: function () {
            $('.loadiv').remove();
          }
      });
      }
    });

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

    // 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');
      var apiJenis= $('#pejabatJenis').val();

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

        $.ajax({
          type: "GET",
          url: "https://sikep.mahkamahagung.go.id/api-pro/v1/training/pegawai/"+nippeg,
          headers: {
              Authorization: 'Bearer ' + token
          },
          dataType: 'json',
          success: function (result, status, xhr) {
            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) {
              alert(error);
          },
          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>');
      }
    });

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

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

      var pilihanIsian = '';

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

      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>";
      }

      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 ($('#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