@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">Pengawasan Bidang Baru</h1>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <form method="post" autocomplete="off">

    @csrf

    <!-- 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="isi">Jadwal</label>
              <div class="row">
                <div class="col">
                  <select class="form-control" name="jadwal" id="jadwal">
                    @foreach ($jadwal as $j)
                    <option value="{{$j->id}}">{{$j->nama}}</option>
                    @endforeach
                  </select>
                  @error('jadwal')
                  <small class="form-text text-danger">{{ $message }}</small>
                  @enderror
                </div>
                <div class="col">
                  <select class="form-control" name="tahun" id="tahun">
                    @for ($i = 0; $i < 10; $i++) <option>{{date('Y')+$i}}</option>
                      @endfor
                  </select>
                  @error('tahun')
                  <small class="form-text text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="form-group">
              <label for="isi">Bidang</label>
              <select class="form-control" name="bidang" id="bidang">
                @foreach ($bidang as $j)
                <option value="{{$j->id}}">{{$j->nama}}</option>
                @endforeach
              </select>
              @error('bidang')
              <small class="form-text text-danger">{{ $message }}</small>
              @enderror
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="isi">Tanggal Mulai</label>
              <input type="text" name="tgl_mulai" id="tgl_mulai" class="form-control datepicker"
                placeholder="Masukan Tgl Mulai" value="{{old('tgl_mulai')}}">
              @error('tanggal_mulai')
              <small class="form-text text-danger">{{ $message }}</small>
              @enderror
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="isi">Tanggal Selesai</label>
              <input type="text" name="tgl_selesai" id="tgl_selesai" class="form-control datepicker"
                placeholder="Masukan Tgl Selesai" value="{{old('tgl_selesai')}}">
              @error('tanggal_selesai')
              <small class="form-text text-danger">{{ $message }}</small>
              @enderror
            </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}}" data-pangkat="{{$u->pangkat.' ('.$u->golongan.')'}}"
                      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 Penanggung Jawab</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 Penanggung Jawab</h5>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Hakim -->
    <div class="modal fade" id="hakimId" tabindex="-1" role="dialog" aria-labelledby="hakimTitleId"
      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_hakim" placeholder="Cari Nama / Nip..">
            </div>
          </div>
          <div class="modal-body px-3 py-0">
            <table class="table table-bordered" id="list_hakim">
              <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-hakim" 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 class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
          </div>
        </div>
      </div>
    </div>

    <div class="card" id="card-hakim">
      <div class="card-header">
        <h3 class="card-title">Hakim Pengawas</h3>
        <div class="card-tools">

          <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#hakimId">
            <i class="fas fa-plus"></i> Tambah
          </button>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-12">
            <div id="frameTableHakimPengawas">
              <h5 class="text-center">Belum Ada Hakim Pengawas</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>
  $(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,
        });
        
      //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) {
              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) {
            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();
          }
      });
      }
    });

    $(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 Penanggung Jawab</h5>');
      }
    });

    // END PEGAWAI

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

    $('.btn-hakim').on("click", function() {
      
      var nippeg = $(this).data('nippeg');
      let that = $(this);
      apiNama="";
      apiSatker="";
      apiPangkat="";
      apiJabatan="";

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

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

        var hasilCariPegawai = $('#tableHakimPengawas 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) {
              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;
  
              $('#tableHakimPengawasTbody').append(
                ` <tr>
                    <input type="hidden" name="hakim_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-hakim" 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');

              $('#tableHakimPengawasTbody').append(
                ` <tr>
                    <input type="hidden" name="hakim_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-hakim" 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) {
            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;

            $('#frameTableHakimPengawas').html(
              ` <table class="table table-bordered" id="tableHakimPengawas">
                  <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="tableHakimPengawasTbody">
                    <tr>
                      <input type="hidden" name="hakim_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-hakim" 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');

              $('#frameTableHakimPengawas').html(
              ` <table class="table table-bordered" id="tableHakimPengawas">
                  <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="tableHakimPengawasTbody">
                    <tr>
                      <input type="hidden" name="hakim_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-hakim" 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-hakim',function(){
      
      $(this).closest("tr").remove();

      if ($('#tableHakimPengawasTbody tr').length == 0){
        $('#frameTableHakimPengawas').html('<h5 class="text-center">Belum Ada Hakim Pengawas</h5>');
      }
    });

    // END PEGAWAI
    });
</script>
@endsection