@extends('layouts.app')

@section('content')

<div class="modal fade" id="detailSurat" tabindex="-1" role="dialog" aria-labelledby="ubahstatusTitleId"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form action="" method="get">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detail Surat</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <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->SuratTugasMonev->nomor_surat}}</td>
								</tr>
								<tr>
								  <th>Lokasi Penandatangan</th>
								  <td>{{$st->SuratTugasMonev->lokasi}}</td>
								</tr>
								<tr>
								  <th>Tanggal Surat</th>
								  <td>{{date('d/m/Y', strtotime($st->SuratTugasMonev->tgl_surat))}}</td>
								</tr>
								<tr>
								  <th>Jabatan Penandatangan</th>
								  <td>{{$st->SuratTugasMonev->pejabat_jenis}}</td>
								</tr>
								<tr>
								  <th>Pejabat Penandatangan</th>
								  <td>{{$st->SuratTugasMonev->pejabat_nama}}</td>
								</tr>
				  
								<tr>
								  <th>Jenis</th>
								  <td>
									<h6 class="mt-0 mb-1 font-weight-bold">{{$st->SuratTugasMonev->JenisSurat->nama}}</h6>
								  </td>
								</tr>


								<tr>
								  <th>Menimbang</th>
								  <td>
									@if ($st->SuratTugasMonev->SuratTugasMenimbang->count() > 1)
									<table class="table table-borderless mb-0">
									  <tbody>
										@foreach ($st->SuratTugasMonev->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->SuratTugasMonev->SuratTugasMenimbang->first()->isi!!}
									@endif
								  </td>
								</tr>
								<tr>
								  <th>Dasar</th>
								  <td>
									@if ($st->SuratTugasMonev->SuratTugasDasar->count() > 1)
									<table class="table table-borderless mb-0">
									  <tbody>
										@foreach ($st->SuratTugasMonev->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->SuratTugasMonev->SuratTugasDasar->first()->isi!!}
									@endif
								  </td>
								</tr>
								<tr>
								  <th>Tujuan</th>
								  <td>
									@if ($st->SuratTugasMonev->SuratTugasTujuan->count() > 1)
									<table class="table table-borderless mb-0">
									  <tbody>
										@foreach ($st->SuratTugasMonev->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->SuratTugasMonev->SuratTugasTujuan->first()->isi!!}
									@endif
								  </td>
								</tr>
								<tr>
								  <th>Tim Pengawas</th>
								  <td>
									<ul class="list-unstyled">
				  
									  @foreach($st->SuratTugasMonev->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>File Surat Tugas</th>
								  <td>
								   <span class="ml-2" id="link_upload_surattugas">
										<a href="{{asset('storage/'.$st->SuratTugasMonev->alamat_file_st_upload)}}">{{$st->SuratTugasMonev->alamat_file_st_upload}}</a>
									  </span>
								  </td>
								</tr>
								<tr>
								  <th>Satker</th>
								  <td>
									{{$st->satker_nama}}
								  </td>
				  
								</tr>
							  </tbody>
							</table>
						  </div>
						</div>
					  </div>
					</div>
					<!-- /.card -->
				  
				  </section>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Keluar</button>
                </div>
            </div>
        </form>
    </div>
</div>

<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="float-left">Surat Tugas :: {{$st->SuratTugasMonev->nomor_surat}}</h1>&nbsp;&nbsp;&nbsp;<button
                                                        class="btn btn-info"
                                                        data-toggle="modal" data-target="#detailSurat"
                                                        >Detail Surat</button>
      </div>
    </div>
  </div>
</section>

{{-- @include('surat-tugas-monev.1_0_detail') --}}
@include('surat-tugas-monev.html.5_0_monev')
@include('surat-tugas-monev.html.8_0_kesimpulan_saran')
@include('surat-tugas-monev.html.6_0_download_file_monev')
@include('surat-tugas-monev.html.7_0_upload_file_monev')


@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 = ''
    }

$(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, divbadge) {
        var c = 0;
    
        $(divdat).find("tr").each(function(ind, el) {
            $(el).find("td:eq(0)").html(++c);
        });
        
        $(divbadge).text(c);
    }

    @include('surat-tugas-monev.js.5_0_monev')
    @include('surat-tugas-monev.js.6_0_download_file_monev')
    @include('surat-tugas-monev.js.7_0_upload_file_monev')
    
    

  });

</script>
@endsection