@extends('layouts.app')

{{-- @push('css')
<style>
  .modal:nth-of-type(even) {
    z-index: 1052 !important;
  }

  .modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
  }
</style>
@endpush --}}

@section('content')

<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="float-left">Surat Tugas :: {{$st->nomor_surat}}</h1>
      </div>
    </div>
  </div>
</section>

<section class="content">

  <!-- Default box -->
  <div class="card">


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


      <div class="row">
        <div class="col-sm-12">
          <table class="table table-bordered table-md">
            <tbody>
              <tr>
                <th width="20%">Nomor Surat</th>
                <td>{{$st->nomor_surat}}</td>
              </tr>
              <tr>
                <th>Lokasi Penandatangan</th>
                <td>{{$st->lokasi}}</td>
              </tr>
              <tr>
                <th>Tanggal Surat</th>
                <td>{{date('d/m/Y', strtotime($st->tgl_surat))}}</td>
              </tr>
              <tr>
                <th>Jabatan Penandatangan</th>
                <td>{{$st->pejabat_jenis}}</td>
              </tr>
              <tr>
                <th>Pejabat Penandatangan</th>
                <td>{{$st->pejabat_nama}}</td>
              </tr>

              <tr>
                <th>Jenis</th>
                <td>
                  <h6 class="mt-0 mb-1 font-weight-bold">{{$st->JenisSurat->nama}}</h6>
                </td>
              </tr>
              <tr>
                <th>Menimbang</th>
                <td>
                  @if ($st->SuratTugasMenimbang->count() > 1)
                  <table class="table table-borderless mb-0">
                    <tbody>
                      @foreach ($st->SuratTugasMenimbang as $key => $dt)
                      <tr>
                        <td width="10px;" class="p-0 pr-3">{{$key+1}}.</td>
                        <td class="p-0">{!!$dt->isi!!}</td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                  @else
                  {!!$st->SuratTugasMenimbang->first()->isi!!}
                  @endif
                </td>
              </tr>
              <tr>
                <th>Dasar</th>
                <td>
                  @if ($st->SuratTugasDasar->count() > 1)
                  <table class="table table-borderless mb-0">
                    <tbody>
                      @foreach ($st->SuratTugasDasar as $key => $dt)
                      <tr>
                        <td width="10px;" class="p-0 pr-3">{{$key+1}}.</td>
                        <td class="p-0">{!!$dt->isi!!}</td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                  @else
                  {!!$st->SuratTugasDasar->first()->isi!!}
                  @endif
                </td>
              </tr>
              <tr>
                <th>Tujuan</th>
                <td>
                  @if ($st->SuratTugasTujuan->count() > 1)
                  <table class="table table-borderless mb-0">
                    <tbody>
                      @foreach ($st->SuratTugasTujuan as $key => $dt)
                      <tr>
                        <td width="10px;" class="p-0 pr-3">{{$key+1}}.</td>
                        <td class="p-0">{!!$dt->isi!!}</td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                  @else
                  {!!$st->SuratTugasTujuan->first()->isi!!}
                  @endif
                </td>
              </tr>
              <tr>
                <th>Satker</th>

                <td>
                  <h6 class="mt-0 mb-1 font-weight-bold">{{$st->satker_nama}}</h6>
                </td>

              </tr>
              <tr>
                <th>Tim Pengawas</th>
                <td>
                  <ul class="list-unstyled">

                    @foreach($st->SuratTugasPegawai as $dt)
                    <li class="media">
                      <div class="media-body">
                        <h6 class="mt-0 mb-1 font-weight-bold">{{$dt->nama}}</h6>
                        <dl class="row">
                          <dd class="col-sm-3">NIP</dd>
                          <dd class="col-sm-9">{{$dt->nip}}</dd>
                          <dd class="col-sm-3">Pangkat/Gol. Ru</dd>
                          <dd class="col-sm-9">{{$dt->pangkat}}</dd>
                          <dd class="col-sm-3">Jabatan</dd>
                          <dd class="col-sm-9">{{$dt->jabatan}}</dd>
                        </dl>
                      </div>
                    </li>
                    @endforeach

                  </ul>
                </td>
              </tr>
              <tr>
                <th>Kode Blangko</th>
                <td>{{$st->KodeBlangko->nama}}</td>
              </tr>
              <tr>
                <th>File</th>
                <td><a href="{{asset('storage/'.$st->alamat_file_st)}}" class="btn btn-primary">Download File</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>


    </div>
  </div>
  <!-- /.card -->

</section>

@if($st->jenis_surat_id == 2)
{{-- PENGAWASAN REGULER--}}
<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="float-left">Pengawasan Reguler</h1>
      </div>
    </div>
  </div>
</section>

<section class="content">

  @include('surat-tugas.modal.m-perkara')
  @include('surat-tugas.modal.m-persidangan')
  @include('surat-tugas.modal.m-umum')
  @include('surat-tugas.modal.m-peradilan')
  @include('surat-tugas.modal.k-pelayanan')

  <div class="card" id="lembarkerjapengawasan">
    <div class="card-header">
      <h3 class="card-title">
        Lembar Kerja Pengawasan
      </h3>
    </div>
    <div class="card-body">

      <div class="row">
        <div class="col-sm-12">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <a class="nav-link active" id="manajemen-peradilan-tab" data-toggle="tab" href="#manajemen-peradilan"
                role="tab" aria-controls="manajemen-peradilan" aria-selected="true">M.Peradilan <span
                  class="badge badge-pill badge-light"
                  id="badge-manajemen-peradilan">{{$st->SuratTugasManajemenPeradilan->count()}}</span></a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link" id="manajemen-perkara-tab" data-toggle="tab" href="#manajemen-perkara" role="tab"
                aria-controls="manajemen-perkara" aria-selected="false">A.Perkara <span
                  class="badge badge-pill badge-light"
                  id="badge-manajemen-perkara">{{$st->SuratTugasAdministrasiPerkara->count()}}</span></a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link" id="manajemen-persidangan-tab" data-toggle="tab" href="#manajemen-persidangan"
                role="tab" aria-controls="manajemen-persidangan" aria-selected="false">A.Persidangan dan
                P.Putusan <span class="badge badge-pill badge-light"
                  id="badge-manajemen-persidangan">{{$st->SuratTugasAdministrasiPersidangan->count()}}</span></a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link" id="manajemen-umum-tab" data-toggle="tab" href="#manajemen-umum" role="tab"
                aria-controls="manajemen-umum" aria-selected="false">A.Umum <span class="badge badge-pill badge-light"
                  id="badge-manajemen-umum">{{$st->SuratTugasAdministrasiUmum->count()}}</span></a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link" id="kinerja-pelayanan-tab" data-toggle="tab" href="#kinerja-pelayanan" role="tab"
                aria-controls="kinerja-pelayanan" aria-selected="false">K.P.Publik <span
                  class="badge badge-pill badge-light"
                  id="badge-kinerja-pelayanan">{{$st->SuratTugasKinerjaPelayanan->count()}}</span></a>
            </li>
          </ul>

          <div class="tab-content" id="myTabContent">
            @include('surat-tugas.lkp.m-peradilan')
            @include('surat-tugas.lkp.m-perkara')
            @include('surat-tugas.lkp.m-persidangan')
            @include('surat-tugas.lkp.m-umum')
            @include('surat-tugas.lkp.k-pelayanan')
            {{-- <div class="tab-pane fade" id="administrasi-perkara" role="tabpanel" aria-labelledby="administrasi-perkara-tab">administrasi-perkara</div>
            <div class="tab-pane fade" id="administrasi-persidangan" role="tabpanel" aria-labelledby="administrasi-persidangan-tab">administrasi-persidangan</div>
            <div class="tab-pane fade" id="administrasi-umum" role="tabpanel" aria-labelledby="administrasi-umum-tab">administrasi-umum</div>
            <div class="tab-pane fade" id="kinerja-pelayanan" role="tabpanel" aria-labelledby="kinerja-pelayanan-tab">kinerja-pelayanan</div> --}}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Default box -->
  <div class="card" id="cardDownloadFileLhp">
    <div class="card-body">
      <div class="row">
        <div class="col-sm-12 d-flex align-items-center justify-content-between">
          <h6 class="font-weight-bold mb-0">Download File LHP </h6>
          <div class="d-flex align-items-center justify-content-end">
            <button class="btn btn-link pr-3" id="btnGenerateFileLhp"><i class="fas fa-sync"></i> Generate FIle</button>
            @if ($st->alamat_file_lhp != '')
            <a href="{{asset('storage/'.$st->alamat_file_lhp)}}" class="btn btn-primary"
              id="btnDownloadFileLhp">Download File</a>
            @else
            <a href="" class="btn btn-primary" id="btnDownloadFileLhp" style="display: none;">Download File</a>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>

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

      <div class="row">
        <div class="col-sm-12">
          <h6 class="font-weight-bold float-left">Scan File Hasil File LHP </h6>
          <div class="float-right mb-3">
            <button type="button" class="btn btn-primary" id="btn_dokumen_upload_lhp">Upload File</a>
          </div>
          <input type="file" id="dokumen_upload_lhp" name="dokumen_upload_lhp" style="display: none;">

          <table class="table table-bordered">
            <thead>
              <tr>
                <th>Nama File</th>
                <th width="250px">Aksi</th>
              </tr>
            </thead>
            <tbody id="tableUploadFileLhp">
              @foreach($st->SuratTugasUploadLhp as $d)
              <tr>
                <td>{{$d->alamat_file}}</td>
                <td>
                  <a href="{{asset('storage').'/'.$d->alamat_file}}" class="btn btn-primary">Download</a>
                  <button class="btn btn-danger btn-hapus-lhp" type="button"
                    data-id_file_lhp="{{$d->id}}">Hapus</button>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>


    </div>
  </div>
  <!-- /.card -->

  <!-- Default box -->


  <!-- Modal -->
  <div class="modal fade" id="ubahstatusId" tabindex="-1" role="dialog" aria-labelledby="ubahstatusTitleId"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Ubah Status</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="">Pilih Status</label>
            <select class="form-control" id="statusTindakLanjut">
              <option value="BELUM">BELUM</option>
              <option value="SUDAH">SUDAH</option>
              <option value="SELESAI">SELESAI</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" id="ubahStatusSimpan" data-id
            data-link>Simpan</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="ubahTargetPenyelesaianId" tabindex="-1" role="dialog" aria-labelledby="ubahstatusTitleId"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Ubah Tanggal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label for="">Target Penyelesaian</label>
          <input type="text" name="target_penyelesaian" id="target_penyelesaian_tindak_lanjut" class="form-control datepicker"
          placeholder="Masukan Tgl">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" id="ubahTargetPenyelesaianSimpan" data-id
            data-link>Simpan</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="ubahTindakLanjutId" tabindex="-1" role="dialog" aria-labelledby="ubahstatusTitleId"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Tindak Lanjut</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label for="">Tindak Lanjut</label>
          <textarea class="form-control" name="tindak_lanjut" id="tindak_lanjut_tindak_lanjut" rows="5"></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" id="ubahTindakLanjutSimpan" data-id
            data-link>Simpan</button>
        </div>
      </div>
    </div>
  </div>

  
  <div class="modal fade" id="ubahTanggalPenyelesaianId" tabindex="-1" role="dialog" aria-labelledby="ubahstatusTitleId"
    aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Ubah Tanggal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label for="">Tanggal Penyelesaian</label>
          <input type="text" name="tanggal_penyelesaian" id="tanggal_penyelesaian_tindak_lanjut" class="form-control datepicker"
          placeholder="Masukan Tgl">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" id="ubahTanggalPenyelesaianSimpan" data-id
            data-link>Simpan</button>
        </div>
      </div>
    </div>
  </div>

  <div class="card card-tindak-lanjut">
    <div class="card-header">
      <h3 class="card-title">
        Tindak Lanjut
      </h3>
    </div>
    <div class="card-body">
      @include('layouts.success_error')
      <div class="row">
        <div class="col-12">
          <h6 class="font-weight-bold mb-3">Manajemen Peradilan</h6>
        </div>
        <div class="col-sm-12">
          <div id="frameTableManajemenPeradilanTindakLanjut">
            @if (! $st->SuratTugasManajemenPeradilan->isEmpty())
            <div class="table-responsive">
              <table class="table table-bordered" id="tableManajemenPeradilanTindakLanjut">
                <thead>
                  <tr>
                    <th style="min-width:150px;">Status T.Lanjut</th>
                    <th style="min-width:400px;">Komentar</th>
                    <th style="min-width:250px;">Temuan</th>
                    <th style="min-width:250px;">Rekomendasi</th>
                    <th style="min-width:150px;">Target Penyelesaian</th>
                    <th style="min-width:250px;">Tindak Lanjut</th>
                    <th style="min-width:150px;">Tgl Penyelesaian</th>
                    <th style="min-width:250px;">Upload Bukti</th>
                  </tr>
                </thead>
                <tbody id="tableManajemenPeradilanTbodyTindakLanjut">
                  @foreach($st->SuratTugasManajemenPeradilan as $key => $dt)
                  <tr id="trManajemenPeradilanTbodyTindakLanjut{{$dt->id}}">
                    <td class="text-center">
                      <button class="btn btn-warning btn-sm btn-block btn-ubah-status-tindak-lanjut" data-toggle="modal"
                        data-target="#ubahstatusId" data-id="{{$dt->id}}" data-status="{{$dt->status}}"
                        data-link="tindak-lanjut-manajemen-peradilan-status">Ubah Status</button>
                      <p class="mt-3 font-weight-bold" id="tindakLanjut{{$dt->id}}">{{$dt->status}}</p>
                    </td>
                    <td>
                      <div class="timeline">

                        @foreach($dt->komentar as $dta)
                        <div>
                          @if(auth()->user()->name == $dta->nama)
                          <i class="fas fa-user bg-green"></i>
                          @else
                          <i class="fas fa-user bg-gray"></i>
                          @endif
                          <div class="timeline-item">
                            @if(auth()->user()->name == $dta->nama)
                            <span class="time bg-success">{{$dta->created_at->format('d M Y H:i:s')}}</span>
                            <h3 class="timeline-header bg-success">{{$dta->nama}}</h3>
                            @else
                            <span class="time">{{$dta->created_at->format('d M Y H:i:s')}}</span>
                            <h3 class="timeline-header">{{$dta->nama}}</h3>
                            @endif
                            <div class="timeline-body">
                              {!! nl2br($dta->komentar) !!}
                            </div>
                          </div>
                        </div>
                        @endforeach

                        <div class="komentar-form">
                          <i class="fas fa-comments bg-yellow"></i>
                          <div class="timeline-item">
                            <h3 class="timeline-header font-weight-bold">Tulis Komentar</h3>

                            <div class="timeline-body">
                              <textarea cols="30" rows="3" class="form-control" required ></textarea>
                            </div>
                            <div class="timeline-footer">
                              <button class="btn btn-primary btn-sm btn-komentar-manajemen-peradilan" data-id="{{$dt->id}}">Kirim Komentar</button>
                            </div>
                          </div>
                        </div>

                      </div>
                    </td>
                    <td>{{$dt->kondisi}}</td>
                    <td>{{$dt->rekomendasi}}</td>
                    <td class="text-center"><button class="btn btn-warning btn-sm btn-block btn-ubah-target-penyelesaian-tindak-lanjut"
                        data-toggle="modal"
                        data-target="#ubahTargetPenyelesaianId"
                        data-id="{{$dt->id}}" 
                        @if(! is_null($dt->target_penyelesaian))
                        data-content="{{date('d/m/Y', strtotime($dt->target_penyelesaian))}}"
                        @else
                        data-content="{{date('d/m/Y')}}"
                        @endif
                        data-link="tindak-lanjut-manajemen-peradilan-target-penyelesaian"
                        >Ubah Tanggal</button>
                      <p class="mt-3 font-weight-bold" id="tindakLanjutTargetPenyelesaian{{$dt->id}}">
                        @if(! is_null($dt->target_penyelesaian))
                        {{date('d/m/Y', strtotime($dt->target_penyelesaian))}}
                        @endif
                      </p>
                    </td>
                    <td>
                      <button class="btn btn-warning btn-sm btn-block btn-ubah-tindak-lanjut-tindak-lanjut" 
                      data-target="#ubahTindakLanjutId"
                      data-id="{{$dt->id}}" 
                      data-content="{{$dt->tindak_lanjut}}"
                      data-link="tindak-lanjut-manajemen-peradilan-tindak-lanjut"
                      data-toggle="modal">Ubah Tindak Lanjut</button>
                      <p class="mt-3" id="tindakLanjutTindakLanjut{{$dt->id}}">{!! nl2br($dt->tindak_lanjut) !!}</p>
                    </td>
                    <td class="text-center"><button class="btn btn-warning btn-sm btn-block btn-ubah-tanggal-penyelesaian-tindak-lanjut"
                      data-toggle="modal"
                      data-target="#ubahTanggalPenyelesaianId"
                      data-id="{{$dt->id}}" 
                      @if(! is_null($dt->tanggal_penyelesaian))
                      data-content="{{date('d/m/Y', strtotime($dt->tanggal_penyelesaian))}}"
                      @else
                      data-content="{{date('d/m/Y')}}"
                      @endif
                      data-link="tindak-lanjut-manajemen-peradilan-tanggal-penyelesaian"
                      >Ubah Tanggal</button>
                      <p class="mt-3 font-weight-bold" id="tindakLanjutTanggalPenyelesaian{{$dt->id}}">
                        @if(! is_null($dt->tanggal_penyelesaian))
                        {{date('d/m/Y', strtotime($dt->tanggal_penyelesaian))}}
                        @endif
                      </p>
                    </td>
                    <td><button class="btn btn-primary btn-sm btn-block btn_tindak_lanjut_manajemen_peradilan_files">+ Upload File</button>
                      <input type="file" class="tindak_lanjut_manajemen_peradilan_files" data-id_tindak_lanjut_manajemen_peradilan="{{$dt->id}}" name="tindak_lanjut_manajemen_peradilan_files" style="display: none;">
                      <ul class="list-group list-group-flush" id="ul_tindak_lanjut_manajemen_peradilan{{$dt->id}}">
                        @foreach($dt->file as $d)
                          <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <a href="{{asset('storage').'/'.$d->alamat_file}}">{{$d->alamat_file}}</a>
                            <button class="btn text-danger btn-link btn-hapus_tindak_lanjut_manajemen_peradilan_files" type="button"
                              data-id_tindak_lanjut_manajemen_peradilan_files="{{$d->id}}"><i class="fas fa-times"></i></button>
                          </li>
                        @endforeach
                      </ul>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
            @else
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-12 text-center">
                    <h5>Belum Ada Data</h5>
                  </div>
                </div>
              </div>
            </div>
            @endif
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-12">
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th colspan="8">ADMINISTRASI PERKARA</th>
                </tr>
                <tr>
                  <th style="min-width:150px;">Status T.Lanjut</th>
                  <th style="min-width:400px;">Komentar</th>
                  <th style="min-width:250px;">Temuan</th>
                  <th style="min-width:250px;">Rekomendasi</th>
                  <th style="min-width:150px;">Target Penyelesaian</th>
                  <th style="min-width:250px;">Tindak Lanjut</th>
                  <th style="min-width:150px;">Tgl Penyelesaian</th>
                  <th style="min-width:150px;">Upload Bukti</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <select name="stat" id="stat" class="form-control">
                      <option value="volvo">BELUM</option>
                      <option value="saab">SUDAH</option>
                      <option value="mercedes">SELESAI</option>
                    </select>
                  </td>
                  <td>
                    <div class="timeline">
                      <div>
                        <i class="fas fa-user bg-green"></i>
                        <div class="timeline-item">
                          <span class="time">31 Agu 2021 16:44:25</span>
                          <h3 class="timeline-header">Dr. Abd.Hakim, M.H.I.</h3>

                          <div class="timeline-body">
                            Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
                            weebly ning heekya handango imeem plugg dopplr jibjab, movity
                            jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
                            quora plaxo ideeli hulu weebly balihoo...
                          </div>
                        </div>
                      </div>

                      <div>
                        <i class="fas fa-comments bg-yellow"></i>
                        <div class="timeline-item">
                          <h3 class="timeline-header font-weight-bold">Tulis Komentar</h3>

                          <div class="timeline-body">
                            <textarea name="" id="" cols="30" rows="3" class="form-control"></textarea>
                          </div>
                          <div class="timeline-footer">
                            <button class="btn btn-primary btn-sm">Kirim Komentar</button>
                          </div>
                        </div>
                      </div>
                      <!-- END timeline item -->


                    </div>
                  </td>
                  <td>Diambil dari KONDISI lembar kerja pengawasan</td>
                  <td>Diambil dari REKOMENDASI lembar kerja pengawasan</td>
                  <td>Pilih Tangggal</td>
                  <td><button class="btn btn-primary">+ Tindak Lanjut</button></td>
                  <td>Pilih Tangggal</td>

                  <td>Upload Bukti semua bentuk file</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">
          <h6 class="font-weight-bold float-left">Download Words Tindak Lanjut </h6>
          <div class="float-right">
            <a href="#" class="btn btn-primary">Download File</a>


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


    </div>
  </div>
  <!-- /.card -->

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


      <div class="row">
        <div class="col-sm-12">
          <h6 class="font-weight-bold float-left">Scan File Hasil Tindak Lanjut </h6>
          <div class="float-right mb-3">
            <a href="#" class="btn btn-primary">Upload File</a>
          </div>
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>Nama File</th>
                <th width="250px">Aksi</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Pengawasan A.docx</td>
                <td>
                  <a href="#" class="btn btn-primary">Download File</a>
                  <a href="#" class="btn btn-danger">Hapus</a>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  @endif
</section>
@endsection

@section('js')
<script>
  jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      var sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  });
}
});


function remove_selected(id_input){
      var fileInput = document.getElementById(id_input)
      fileInput.value = ''
      fileInput.dispatchEvent(new Event('change'));
    }

function remove_selected_by_class(id_input){
      var fileInput = document.getElementsByClassName(id_input)
      fileInput.value = ''
      //fileInput.dispatchEvent(new Event('change'));
    }

$(document).ready(function(){
  

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

  var loadiv = `<div class="overlay loadiv">
    <div class="spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
      </div>
      </div>`;
      
      function hitungNomor(divdat) {
        var c = 0;
      
        $(divdat).find("tr").each(function(ind, el) {
            $(el).find("td:eq(0)").html(++c);
        });
      
      }

    @include('surat-tugas.js.show-m-peradilan')
    @include('surat-tugas.js.show-manajemen-perkara')
    @include('surat-tugas.js.show-manajemen-persidangan')
    @include('surat-tugas.js.show-manajemen-umum')
    @include('surat-tugas.js.show-kinerja-pelayanan')

    @include('surat-tugas.js.show-generate-file-lhp')
    @include('surat-tugas.js.show-kriteria-menimbang')
    
    $('#btn_dokumen_upload_lhp').on('click', function() {
      remove_selected('dokumen_upload_lhp');
      $('#dokumen_upload_lhp').trigger("click");
    });
    
    $('.btn_tindak_lanjut_manajemen_peradilan_files').on('click', function() {
      remove_selected_by_class('tindak_lanjut_manajemen_peradilan_files');
      $(this).next().trigger("click");
    });

    $(document).on('click','.btn-hapus-lhp',function(){

      that = $(this);

      $.ajax({
            type: "POST",
            data : { _token: "{{ csrf_token() }}", id: $(this).data("id_file_lhp") },
            url: "{{url('surat-tugas-api/upload-file-lhp-hapus')}}",
            beforeSend: function() {
              $('#card_upload_file_lhp').append(loadiv);
            },
            success: function(data) {
              that.closest("tr").remove();
            },
            complete: function() {
                $('.loadiv').remove();
            }
        });

    });
    
    $("#dokumen_upload_lhp").change(function(){

      if ($(this).get(0).files.length == 0) {
        return;
      }

      let formData = new FormData();
      
      formData.append('_token', "{{ csrf_token() }}");
      formData.append('st_id', "{{ $st->id }}");
      formData.append('dokumen_upload_lhp', $('#dokumen_upload_lhp')[0].files[0]);

      $.ajax({
          type: "POST",
          method: 'POST',
          data : formData,
          url: "{{url('surat-tugas-api/upload-file-lhp')}}",
          processData: false,
          contentType: false,
          beforeSend: function() {
            $('#card_upload_file_lhp').append(loadiv);
          },
          success: function(data) {
            $('#tableUploadFileLhp').append(
              `
              <tr>
                <td>`+data.file+`</td>
                <td>
                  <a href="{{asset('storage/')}}/`+data.file+`" class="btn btn-primary">Download</a>
                  <button class="btn btn-danger btn-hapus-lhp" type="button" data-id_file_lhp="`+data.id_file_lhp+`">Hapus</button>
                </td>
              </tr>
              `
            );
          },
          complete: function() {
              $('.loadiv').remove();
          }
      });

    });

  });

</script>
@endsection