@extends('layouts.app')
@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="float-left">Edit Surat Tugas - Umum</h1>
      </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_format(date_create($surattugas->tgl_kegiatan_awal),'d/m/Y')}}">
    <input type="hidden" name="tgl_akhir" id="tgl_akhir" value="{{date_format(date_create($surattugas->tgl_kegiatan_akhir),'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>
              <p class="border p-2 bg-light">{{$surattugas->nomor_surat}}</p>
            </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="{{date_format(date_create($surattugas->tgl_surat),'d/m/Y')}}" >
              @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" >
                @foreach ($kode_blangko as $u)
                <option value="{{$u->id}}"
                    @if($u->id == $surattugas->kode_blangko_id)
                    selected
                    @endif
                    >{{$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>
              @if($surattugas->jenis_surat_id > 2)
                <input type="text" class="form-control" value="{{$surattugas->jenis}}" >
                <select class="form-control" name="jenis_surat_id" id="jenis_surat_id" >
                    <option value="">--Pilih Jenis Surat--</option>
                    @foreach ($jenis_surat as $u)
                    @if($u->id > 2)
                    <option value="{{$u->id}}"
                        @if($u->id == $surattugas->jenis_surat_id)
                        selected
                        @endif
                        >{{$u->nama}}</option>
                    @endif
                    @endforeach
                </select>
                @error('jenis_surat_id')
                <small class="form-text text-danger">{{ $message }}</small>
                @enderror
              @else
                <p class="border p-2 bg-light">{{$surattugas->JenisSurat->nama}}</p>
              @endif
            </div>
          </div>
        </div>

        @if($surattugas->jenis_surat_id <= 2 || $surattugas->jenis_surat_id == 6)
        <div id="bilaPengawasanReguler">
          <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="{{date_format(date_create($surattugas->tgl_kegiatan_awal),'d/m/Y')}} - {{date_format(date_create($surattugas->tgl_kegiatan_akhir),'d/m/Y')}}" >
                @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>
        @endif

      </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" id="lokasi" class="form-control" placeholder="Masukan Lokasi" value="{{$surattugas->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" {{$surattugas->pejabat_jenis == 'Ketua' ? 'selected': ''}}>Ketua</option>
                      <option value="PLT Ketua" {{$surattugas->pejabat_jenis == 'PLT Ketua' ? 'selected': ''}}>PLT Ketua</option>
                      <option value="Wakil Ketua" {{$surattugas->pejabat_jenis == 'Wakil Ketua' ? 'selected': ''}}>Wakil Ketua</option>
                      <option value="PLT Wakil Ketua" {{$surattugas->pejabat_jenis == 'PLT Wakil Ketua' ? 'selected': ''}}>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">
              
              <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="{{$surattugas->pejabat_nip}}">
                    <input type="hidden" name="pejabat_nama" value="{{$surattugas->pejabat_nama}}">
                    <input type="hidden" name="pejabat_pangkat" value="{{$surattugas->pejabat_pangkat}}">
                    <input type="hidden" name="pejabat_jabatan" value="{{$surattugas->pejabat_jabatan}}">
                    <input type="hidden" name="pejabat_satker" value="{{$surattugas->pejabat_satker}}">
                    <input type="hidden" name="pejabat_jenis" value="{{$surattugas->pejabat_jenis}}">
                    <td>{{$surattugas->pejabat_nip}}</td>
                    <td>{{$surattugas->pejabat_nama}}</td>
                    <td>{{$surattugas->pejabat_pangkat}}</td>
                    <td>{{$surattugas->pejabat_jabatan}}</td>
                    <td>{{$surattugas->pejabat_satker}}</td>
                    <td>{{$surattugas->pejabat_jenis}}</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>`

            </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 samaTahun = ("{{date_format(date_create($surattugas->tgl_kegiatan_awal),'Y')}}" == "{{date_format(date_create($surattugas->tgl_kegiatan_akhir),'Y')}}");
      var startDate = moment("{{date_format(date_create($surattugas->tgl_kegiatan_awal),'Y-m-d')}}");
      var endDate = moment("{{date_format(date_create($surattugas->tgl_kegiatan_akhir),'Y-m-d')}}");
      var dateList = getDaysBetweenDates(startDate, endDate);
      var listharilibur = [];
      var adata = '';

      var loadiv = `<div class="overlay loadiv">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>`;
        
      $.ajax({
        type: "GET",
        url: "https://kalenderindonesia.com/api/API1npzEyAaW1/libur/masehi/{{date_format(date_create($surattugas->tgl_kegiatan_awal),'Y')}}",
        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/{{date_format(date_create($surattugas->tgl_kegiatan_akhir),'Y')}}",
              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 () {
          //
        }
      });

    $('.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 () {
          //
        }
      });
    });

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

    // 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 (! $('#lokasi').val()) {
        pilihanIsian = pilihanIsian+"- Lokasi penandatangan <br>";
      }


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

    });

  });
</script>
@endsection