@extends('layouts.admin.core')
@section('content')

<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="float-left">Detail Usulan</h1>
        <div class="float-right"><a href="{{url('usulan/edit',[$usulan->id])}}" class="btn btn-info btn-sm">Edit
            Usulan</a>
          <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal-danger">
            Hapus Usulan
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="content">
  @role('Admin')
  <div class="modal fade" id="modal-tambah-status">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Tambah Status</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{url('usulan/status/store')}}" method="post" enctype="multipart/form-data">
          <div class="modal-body">
            {{ csrf_field() }}
            <input type="hidden" name="usulan_id" value="{{$usulan->id}}">
            <div class="form-group">
              <label for="tanggalStatus">Tanggal Status</label>
              <input class="form-control" type="text" name="tanggalstatus" id="tanggalStatus">
            </div>
            <div class="form-group">
              <label for="keterangan">Keterangan</label>
              <input class="form-control" type="text" name="keterangan" id="keterangan" placeholder="Masukan Keterangan"
                required>
            </div>
            <div class="form-group">
              <label for="dokumen">Upload Dokumen</label>
              <div class="input-group">
                <div class="custom-file">
                  <input type="file" class="custom-file-input" id="dokumen" name="dokumen" />
                  <label class="custom-file-label" for="dokumen">Pilih File</label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="pilihanstatus">Teruskan Informasi Status Ke</label>

              <div class="form-check">
                <input class="form-check-input check-pilihanstatus" type="radio" name="pilihan_terusan_status" id="teruskansemua" value="1" checked>
                <label class="form-check-label" for="teruskansemua">
                  Teruskan Ke Semua Pegawai Yang Masih Status PROSES
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input check-pilihanstatus" type="radio" name="pilihan_terusan_status" id="janganteruskan"
                  value="2">
                <label class="form-check-label" for="janganteruskan">
                  Jangan Teruskan Ke Pegawai
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input check-pilihanstatus" type="radio" name="pilihan_terusan_status" id="pilihsebagian" value="3">
                <label class="form-check-label" for="pilihsebagian">
                  Teruskan ke sebagian pegawai
                </label>
                <div class="row">
                  <div class="col-md-12">

                    <table class="table table-sm table-bordered mt-2">
                      <thead>
                        <tr>
                          <th style='min-width:120px'>NIP</th>
                          <th>Nama</th>
                          <th style='min-width:60px' class="text-center">Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach ($usulan->pegawai as $up)
                        <tr>
                          <td>
                            <div class="form-check">
                              <input class="form-check-input check-input-pegawai" type="checkbox" value="{{$up->id}}"
                                name="pilihan_pegawai_status[]" id="idpeg{{$up->id}}" disabled>
                              <label class="form-check-label" for="idpeg{{$up->id}}">
                                {{$up->nip_baru}}
                              </label>
                            </div>
                          </td>
                          <td>{{$up->nama}}</td>
                          <td class="text-center">
                            @switch($up->status_terakhir)
                            @case("SELESAI")
                                <span class="badge badge-success">SELESAI</span>
                                @break
                            @case("BATAL")
                                <span class="badge badge-danger">BTL</span>
                                @break
                            @case("USULAN")
                                <span class="badge badge-info">USULAN</span>
                                @break
                            @default
                                <span class="badge badge-warning">PROSES</span>
                            @endswitch
                          </td>
                        </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary">Simpan</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
  @endrole
  
  <div class="modal fade" id="modal-danger">
    <div class="modal-dialog">
      <div class="modal-content bg-danger">
        <div class="modal-header">
          <h4 class="modal-title">Hapus Usulan Ini ?</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Apakah anda yakin ingin menghapus data usulan ini beserta data lain yang meliputi :
            <br>
            <ul>
              <li>List Pegawai</li>
              <li>Status Usulan</li>
              <li>File usulan yang sudah di upload</li>
            </ul>
          </p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-outline-light" data-dismiss="modal">Batal</button>
          <form action="{{url('usulan/hapus',[$usulan->id])}}" method="post">
            {{ csrf_field() }}
            <button type="submit" class="btn btn-outline-light">Ya, Hapus</button>
          </form>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  {{-- EDIT STATUS --}}
  {{-- HAPUS STATUS --}}
  @foreach ($usulan->status as $item)
  <div class="modal fade" id="modal-edit-status{{$item->id}}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit status</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form action="{{url('usulan/status/edit',[$item->id])}}" method="post" enctype="multipart/form-data">
          {{ csrf_field() }}
          <div class="modal-body">
            <div class="form-group">
              <label for="tanggal">Tanggal Status</label>
              <input type="text" class="form-control" name="tanggal_status" id="tanggal" required="required"
                value="{{date('d/m/Y', strtotime($item->tanggal_status))}}">
            </div>

            <div class="form-group">
              <label for="keterangan">Keterangan</label>
              <input type="text" class="form-control" id="keterangan" name="keterangan" required="required"
                value="{{$item->keterangan}}">
            </div>

            <div class="form-group">
              <label for="dokumenupload">Dokumen</label>
              <div><a
                  href="{{asset('storage/status_usulan_dokumen/'.$item->dokumen_upload)}}">{{$item->dokumen_upload}}</a>
              </div>
            </div>

            <div class="bg-warning p-2">
              <div class="form-group">
                <label for="dokumenupload">Upload Dokumen <small>(Upload di sini bila ingin mengubah
                    dokumen)</small></label>
                <div class="input-group">
                  <div class="custom-file">
                    <input type="file" class="custom-file-input" id="dokumenupload" name="dokumen_upload" />
                    <label class="custom-file-label" for="dokumenupload">Pilih File</label>
                  </div>
                </div>
              </div>
            </div>


          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-light" data-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-warning">Simpan</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  @endforeach

  {{-- HAPUS STATUS --}}
  @foreach ($usulan->status as $item)
  <div class="modal fade" id="modal-hapus-status{{$item->id}}">
    <div class="modal-dialog">
      <div class="modal-content bg-danger">
        <div class="modal-header">
          <h4 class="modal-title">Hapus Status Ini ?</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Apakah anda yakin ingin menghapus status ini ?</p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-outline-light" data-dismiss="modal">Batal</button>
          <form action="{{url('usulan/status/hapus',[$item->id])}}" method="post">
            {{ csrf_field() }}
            <button type="submit" class="btn btn-outline-light">Ya, Hapus</button>
          </form>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  @endforeach

  <div class="card">
    <div class="card-header">
      <h3 class="card-title">Detail Usulan</h3>
    </div>
    <div class="card-body p-0">
      <table class="table table-responsive">
        <tbody>
          <tr>
            <th width="15%">Nomor Usulan</th>
            <td width="35%">{{$usulan->nomor_usulan}}</td>
            <th width="15%">Tanggal Usulan</th>
            <td width="35%">{{date('d/m/Y', strtotime($usulan->tanggal_usulan))}}</td>
          </tr>
          <tr>
            <th>Jenis Usulan</th>
            <td>{{$usulan->jenisusulan->usulan->nama_usulan}}
              {{$usulan->jenisusulan->nama_usulan_jenis}}</td>
            <th>Satuan Kerja</th>
            <td>{{$usulan->satker->nama}}</td>
          </tr>
          <tr>
            <th>Perihal</th>
            <td>{{$usulan->perihal}}</td>
            <th>Surat Pengantar</th>
            <td><a href="{{asset('storage/suratpengantar/'.$usulan->surat_pengantar)}}">{{$usulan->surat_pengantar}}</a>
            </td>
          </tr>
          <tr>
            <th>Status</th>
            <td>
              @switch($usulan->status_terakhir)
              @case("SELESAI")
                                <span class="badge badge-success">SELESAI</span>
                                @break
                            @case("BATAL")
                                <span class="badge badge-danger">BTL</span>
                                @break
                            @case("USULAN")
                                <span class="badge badge-info">USULAN</span>
                                @break
							@case("TMS")
                                <span class="badge badge-danger">TMS</span>
                                @break
                            @default
                                <span class="badge badge-warning">PROSES</span>
              @endswitch
            </td>
            <th>Tgl Status</th>
            <td>{{date('d/m/Y', strtotime($usulan->tanggal_status_terakhir))}}</td>
          </tr>
          <tr>
            <th>Progress</th>
            <td>
              <div class="progress">
                @if( $usulan->progress >= 100)
                <div class="progress-bar bg-success" style="width: 100%">100%</div>
                @else
                <div class="progress-bar bg-warning" style="width: {{$usulan->progress}}%">{{$usulan->progress}}%</div>
                @endif
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="card card-primary card-outline card-outline-tabs">
    <div class="card-header p-0 border-bottom-0">
      <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill" href="#custom-tabs-four-home"
            role="tab" aria-controls="custom-tabs-four-home" aria-selected="true">List Pegawai</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="custom-tabs-four-profile-tab" data-toggle="pill" href="#custom-tabs-four-profile"
            role="tab" aria-controls="custom-tabs-four-profile" aria-selected="false">Status Usul</a>
        </li>
      </ul>
    </div>
    <div class="card-body p-0">
      <div class="tab-content" id="custom-tabs-four-tabContent">
        <div class="tab-pane fade active show" id="custom-tabs-four-home" role="tabpanel"
          aria-labelledby="custom-tabs-four-home-tab">
          <table class="table table-responsive">
            <thead>
              <tr>
                <th style='min-width:150px'>NIP</th>
                <th style='min-width:120px'>Nama</th>
                <th style='min-width:80px'>Status</th>
                <th style='min-width:100px'>Tgl Status</th>
                <th>Opsi</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($usulan->pegawai as $up)
              <tr>
                <td>{{$up->nip_baru}}</td>
                <td>{{$up->nama}}</td>
                <td>
                  @switch($up->status_terakhir)
                  @case("SELESAI")
                  <span class="badge badge-success">SELESAI</span>
                  @break
              @case("BATAL")
                  <span class="badge badge-danger">BTL</span>
                  @break
              @case("USULAN")
                  <span class="badge badge-info">USULAN</span>
                  @break
			  @case("TMS")
                  <span class="badge badge-danger">TMS</span>
                  @break
              @default
                  <span class="badge badge-warning">PROSES</span>
                  @endswitch
                </td>
                <td>{{date('d/m/Y', strtotime($up->tanggal_status_terakhir))}}</td>
                <td>
                  <a href="{{url('usulan/pegawai',[$up->id])}}" type="button"
                    class="btn btn-primary btn-xs">Detail</a>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        <div class="tab-pane fade" id="custom-tabs-four-profile" role="tabpanel"
          aria-labelledby="custom-tabs-four-profile-tab">
          @role('Admin')
          <div class="p-3">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-tambah-status">
              Tambah Status
            </button>
          </div>
          @endrole
          <table class="table">
            <thead>
              <tr>
                <th style='min-width:80px'>Tanggal</th>
                <th>Keterangan</th>
                <th style='min-width:100px'>Dokumen</th>
                <th>Opsi</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($usulan->status as $item)
              <tr>
                <td>{{date('d/m/Y', strtotime($item->tanggal_status))}}</td>
                <td>{{$item->keterangan}}</td>
                <td><a
                    href="{{asset('storage/status_usulan_dokumen/'.$item->dokumen_upload)}}">{{$item->dokumen_upload}}</a>
                </td>
                <td>
                  <button type="button" class="btn btn-warning btn-xs" data-toggle="modal"
                    data-target="#modal-edit-status{{$item->id}}">Edit</button>
                  <button type="button" class="btn btn-danger btn-xs" data-toggle="modal"
                    data-target="#modal-hapus-status{{$item->id}}">Hapus</button>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- /.card -->
  </div>

</section>
@endsection

@push('tjs')
<script>
  $(document).ready(function(){
      bsCustomFileInput.init();

        //DATE
        $('input[name="tanggalstatus"]').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            locale: {
            "format": "DD/MM/YYYY"
        }
        });

        //DATE
        $('input[name="tanggal_status"]').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            locale: {
            "format": "DD/MM/YYYY"
        }
        });

        $('.check-pilihanstatus').on('change', function(){
          $('.check-input-pegawai').prop( "disabled", $(this).val() != 3 );
        });

    });
</script>
@endpush