@extends('layouts.master')

@section('title', 'Periode')

@section('breadcrumb')
    <div class="row mb-2">
        <div class="col-sm-12">
            <a  href="{{ route('evaluasi.pelaporan.komponen') }}" style="cursor: pointer;" class="btn btn-info" id="simpan">
                <i class="fa fa-fast-backward "></i> Kembali
            </a>
        </div>
    </div>
@endsection


@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="row">
                                <div class="col-md-6 text-left">
                                <h5>{{$komponen->kode}}. {{$komponen->komponen}}</h5>
                                </div>
                            </div>
                            </div>
                            <div class="card-body" style="padding:10px;">
                                    @foreach ($komponen->komponensub->sortBy('kode') as $sub)
                                    @php
                                        $dataSubTrx =null;
                                        $status='1';
                                       if (!empty($pelaporan)) {
                                        $dataSubTrx = $pelaporan->komponenSub->where('komponen_sub_id',$sub->id)->first(); 
                                        if (!empty( $dataSubTrx )) {
                                            $status = $dataSubTrx->status;
                                        }
                                        
                                       }
                                      
                                    @endphp
                                     
                                    <div class="accordion"  id="accordion{{$sub->id}}" >
                                        <div class="card">
                                            <div class="card-header" id="headingOne{{$sub->id}}" style="padding: 10px; padding-bottom: 0px;">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <table style="width: 100%; cursor:pointer; margin-bottom:1%;" data-toggle="collapse" data-target="#collapseOne{{$sub->id}}" aria-expanded="true" aria-controls="collapseOne{{$sub->id}}"  class="table table-sm table-borderless"  >
                                                            <tr>
                                                                <td class="text-success text-left"  width="5%"><b>{{$sub->kode}}.</b></td>
                                                                <td class="text-success"><b>{{$sub->komponen_sub}}</b></td>
                                                                <td width="20%" style="font-size: 20px; text-align:right;" >{!!$status ==0?'<p class="badge bg-warning ">Revisi</p>':'' !!} <p class="badge bg-success ">{{$sub->bobot}}</p></td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="collapseOne{{$sub->id}}" class="collapse show" aria-labelledby="headingOne{{$sub->id}}" data-parent="#accordion{{$sub->id}}">
                                                <div class="card-body" style="padding: 10px;">
                                                    @if (Auth::user()->role->id==3)
                                                    <table  class="table table-sm"  style="width: 100%; border-top: none;">
                                                        @foreach ($sub->kriteria->whereIn('is_pengguna',[0,1])->sortBy('kode') as $kri)
                                                            <tr>
                                                                <td>{{$kri->kode}}.</td>
                                                                <td>{{$kri->kriteria}}</td>
                                                            </tr>
                                                        @endforeach
                                                    </table>
                                                    @else
                                                    <table  class="table table-sm"  style="width: 100%;">
                                                        @foreach ($sub->kriteria->whereIn('is_pengguna',[0,2])->sortBy('kode') as $kri)
                                                        <tr>
                                                            <td>{{$kri->kode}}.</td>
                                                            <td>{{$kri->kriteria}}</td>
                                                        </tr>
                                                        @endforeach
                                                    </table>
                                                    @endif
                                                    
                                                </div>
                                         @if (!empty($dataSubTrx))
                                         @if (!empty($dataSubTrx->log->isNotEmpty()))
                                            <div class="card-footer pt-0">
                                                <fieldset class="{{$dataSubTrx->status ==0?"scheduler-border-warning":"scheduler-border-success"}}">
                                                    <legend class="scheduler-border">{{$dataSubTrx->status ==0?'Temuan Verifikator':'Rekomendasi Verifikator'}}</legend>
                                                          <div class="form-group">
                                                                    {!!$dataSubTrx->status ==0?$dataSubTrx->log->sortByDesc('id')->first()->catatan:$dataSubTrx->log->sortByDesc('id')->first()->rekomendasi!!}
                                                                </div>
                                                </fieldset>
                                            </div> 
                                            @endif 
                                            @endif
                                        </div>
                                        </div>
                                    </div>
                                    @endforeach 
                            </div>
                        </div>
                    </div>

            <div class="col-md-6">
                @php $indexWajib=$dokumenWajib->count()+1; @endphp
                    @foreach ($dokumenWajib as $dok)
                    <div class="row">
                        <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="row">
                                            <div class="col-md-12 text-left">
                                                <h5>{{$dok->dokumen->dokumen}} <span style="color:red" >{{$dok->dokumen->status==1?'* ':''}}</span> </h5>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding:20px;">
                                        @if ($is_edit==1)
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                  <label for="dokumenWajib{{$dok->dokumen->id}}" class="btn btn-default  font-weight-normal" style="margin-bottom: 1px;">
                                                    <i class="fa fa-upload text-right"></i> Pilih Dokumen 
                                                </label>
                                                <label  id="tampungdokumenWajib{{$dok->dokumen->id}}" style="cursor:pointer; display:none;"></label>
                                                <div class="progress" id="progressDivdokumenWajib{{$dok->dokumen->id}}"  style="height:10px; display:none;" >
                                                    <div class="progress-bar bg-success progress-bar-striped" id="progressDivdokumenWajib{{$dok->dokumen->id}}" 
                                                        role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%">  
                                                    </div> 
                                                </div> 
                                                  <input class="pilihDokumenWajib" id="dokumenWajib{{$dok->dokumen->id}}" dokumen_id="{{$dok->dokumen->id}}"  type="file" style="display:none;" />
                                              </div>
                                              </div>
                                            <div class="col-md-7">
                                              <div class="form-group">
                                                <textarea class="form-control info-box-number" rows="1" placeholder="Catatan dokumen"   id="catatanWajib{{$dok->dokumen->id}}"  style="font-weight: normal;"></textarea>
                                            </div>
                                            </div>
                                            <div class="col-md-2">
                                                <a style="cursor: pointer;" class="btn btn-success addEvidence" 
                                                id="addEvidence{{$dok->dokumen->id}}" komponen_id="{{$dok->dokumen->komponen_id}}" dokumen_id="{{$dok->dokumen->id}}" status="{{$dok->dokumen->status}}" nama="{{$dok->dokumen->dokumen}}">
                                                    <i id="iconAddWajib{{$dok->dokumen->id}}" class="fa fa-plus-circle"></i>
                                                </a>
                                            </div>
                                          </div>
                                          @endif
                                        <div class="row buktiElementWajib{{$dok->dokumen->id}}">
                                            <div class="col-md-12">
                                            <table id="table{{$dok->dokumen->id}}" dokumen_id="{{$dok->dokumen->id}}" class="table table-bordered table-hover" style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th style="display: none;">id komponen</th>
                                                    <th style="display: none;">id detil</th>
                                                    <th >Catatan</th>
                                                    <th width="20%">File</th>
                                                    @if ($is_edit==1) <th width="10%">Action</th> @endif
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if (!empty($pelaporan->bukti))
                                                    @foreach ($pelaporan->bukti->where('komponen_id',$komponen->id)->where('dokumen_id',$dok->dokumen->id) as $bk)
                                                        <tr>
                                                            <td style="display: none;">{{$bk->komponen_id}}</td>
                                                            <td style="display: none;">{{$bk->id}}</td>
                                                            <td>{{$bk->keterangan}}</td>
                                                            <td><a class="btn btn-primary btn-xs" href='{{$bk->link}}' target="_blank" >  <span class="fa fa-file" ></span> Lihat File </a></td>
                                                            @if ($is_edit==1) <td><a class='btn btn-danger btn-xs'  idd="{{$dok->dokumen->id}}" title='Remove Item'>  <span class=' fa fa-times-circle' ></span> </a></td>@endif
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-6 text-left">
                                            <h5>Dokumen Lain-Lain</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body" style="padding:20px;">
                                    @if ($is_edit==1)
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                              <label for="dokumenWajib-1" class="btn btn-default  font-weight-normal" style="margin-bottom: 1px;">
                                                <i class="fa fa-upload text-right"></i> Pilih Dokumen 
                                            </label>
                                            <label  id="tampungdokumenWajib-1" style="cursor:pointer; display:none;"></label>
                                            <div class="progress" id="progressDivdokumenWajib-1"  style="height:10px; display:none;" >
                                                <div class="progress-bar bg-success progress-bar-striped" id="progressDivdokumenWajib-1" 
                                                    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%">  
                                                </div> 
                                            </div> 
                                              <input class="pilihDokumenWajib" id="dokumenWajib-1" dokumen_id="-1"  type="file" style="display:none;" />
                                          </div>
                                          </div>
                                        <div class="col-md-7">
                                          <div class="form-group">
                                            <textarea class="form-control info-box-number" rows="1" placeholder="Catatan dokumen"   id="catatanWajib-1"  style="font-weight: normal;"></textarea>
                                        </div>
                                        </div>
                                        <div class="col-md-2">
                                            <a style="cursor: pointer;" class="btn btn-success addEvidence" 
                                            id="addEvidence-1" komponen_id="{{$komponen->id}}" dokumen_id="-1">
                                                <i id="iconAddWajib-1" class="fa fa-plus-circle"></i>
                                            </a>
                                        </div>
                                      </div>
                                      @endif
                                    <div class="row">
                                    <div class="col-md-12">
                                        <table id="table-1" dokumen_id="-1" class="table table-bordered table-hover" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th style="display: none;">id komponen</th>
                                                <th style="display: none;">id detil</th>
                                                <th >Catatan</th>
                                                <th width="20%">File</th>
                                                @if ($is_edit==1) <th width="10%">Action</th>  @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if (!empty($pelaporan->bukti))
                                                @foreach ($pelaporan->bukti->where('komponen_id',$komponen->id)->where('dokumen_id',-1) as $bk)
                                                    <tr>
                                                        <td style="display: none;">{{$bk->komponen_id}}</td>
                                                        <td style="display: none;">{{$bk->id}}</td>
                                                        <td>{{$bk->keterangan}}</td>
                                                        <td><a class="btn btn-primary btn-xs" href='{{$bk->link}}' target="_blank" >  <span class="fa fa-file" ></span> Lihat File </a></td>
                                                        @if ($is_edit==1) <td><a class='btn btn-danger btn-xs'  idd="-1" title='Remove Item'>  <span class=' fa fa-times-circle' ></span> </a></td>@endif
                                                    </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>

                   

                </div>
            </div>
        </div>
    </div>
    
  
@endsection

@section('js')




<script >
  $(".addEvidence").click(function() { 
    var komponen_id= $(this).attr('komponen_id');
    var dokumen_id=$(this).attr('dokumen_id');
    var file=$('#valDokumenWajib'+dokumen_id).attr('href');
    var catatan=$('#catatanWajib'+dokumen_id).val();
    var btndelete =  "<a class='btn btn-danger btn-xs'  idd="+dokumen_id+" title='Remove Item'>  <span class=' fa fa-times-circle' ></span> </a> ";
    if (file==null) {
        return false
    }
    $("#addEvidence"+dokumen_id).addClass("disabled");
    $("#iconAddWajib"+dokumen_id).removeClass("fa fa-plus-circle");
    $("#iconAddWajib"+dokumen_id).addClass("fas fa-spinner fa-spin");
    $.ajax({
        url:"{{ route('evaluasi.pelaporan.storePelaporan') }}",
        type:'POST',
        dataType: 'json',
        cache: false,
        data:{
            periode_id:{{$periodeaktif->id}},
            komponen_id:{{$komponen->id}},
            dokumen_id:dokumen_id,
            file:file,
            catatan:catatan,
            _token: "{{ csrf_token() }}"
            },
            success: function(data){
                if (data['status']==1) {
                    var tb =  $('#table'+dokumen_id).DataTable({
                        "autoWidth": false,
                        "bLengthChange": false,
                        "bPaginate": false,
                        "ordering": false,
                        "searching": false,
                        "pagging": false,
                        "info": false,
                        "bDestroy": true,
                    });
                    var row = tb.row.add( [
                        komponen_id,
                        data['id_detil'],
                        catatan,
                        '<a class="btn btn-primary btn-xs" href='+file+' target="_blank" >  <span class="fa fa-file" ></span> Lihat File </a> ',
                        btndelete
                      ] ).draw(false);
                      tb.columns([0,1]).visible(false);
                      $("#iconAddWajib"+dokumen_id).removeClass("fas fa-spinner fa-spin");
                      $("#addEvidence"+dokumen_id).removeClass("disabled");
                      $("#iconAddWajib"+dokumen_id).addClass("fa fa-plus-circle");
                      $("#tampungdokumenWajib"+dokumen_id).html('');
                      $("#tampungdokumenWajib"+dokumen_id).hide();
                      $('#catatanWajib'+dokumen_id).val('');
                    }else{
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Menyimpan Data',
                            text: data['pesan']
                        });
                    }
            }
    }); 

    // $('table').on('click', 'a', function(e){
    //     var idd=$(this).attr("idd");
    //     // 
    //     var tb =  $('#table'+idd).DataTable();
    //     var data= tb.row($(this).closest('tr')).data(); 
    //     var row = tb.row( $(this).parents('tr'));
        
    //     $.ajax({
    //         url:"{{ route('evaluasi.pelaporan.hapusBukti') }}",
    //         type:'POST',
    //         dataType: 'json',
    //         cache: false,
    //         data:{ id_detil:data[1],_token: "{{ csrf_token() }}"},
    //             success: function(data){
    //                 if (data['status']==1) {
    //                      tb.row(row).remove().draw();
    //                 }else{
    //                     Swal.fire({
    //                         icon: 'error',
    //                         title: 'Gagal Menghapus Data',
    //                         text: data['pesan']
    //                     });
    //                 }

    //             }
    //     });
    // })
});


$( document ).ready(function() {
    $('table').on('click', 'a', function(e){
        var idd=$(this).attr("idd");
        var tb =  $('#table'+idd).DataTable({
                        "autoWidth": false,
                        "bLengthChange": false,
                        "bPaginate": false,
                        "ordering": false,
                        "searching": false,
                        "pagging": false,
                        "info": false,
                        "bDestroy": true,
                    });
        var data= tb.row($(this).closest('tr')).data(); 
        var row = tb.row( $(this).parents('tr'));
         $.ajax({
            url:"{{ route('evaluasi.pelaporan.hapusBukti') }}",
            type:'POST',
            dataType: 'json',
            cache: false,
            data:{ id_detil:data[1],_token: "{{ csrf_token() }}"},
                success: function(data){
                    if (data['status']==1) {
                        tb.row(row).remove().draw();
                        tb.columns([0,1]).visible(false);
                    }else{
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Menghapus Data',
                            text: data['pesan']
                        });
                    }

                }
        });
    })
});
   
  </script>

<script>
     $(document).on('change', '.pilihDokumenWajib', function(){
      var dokumen_id= $(this).attr('dokumen_id');
      var id= $(this).attr('id');
       $("#progressDivdokumenWajib"+dokumen_id).show(); 
       $("#progressDokumenWajib"+dokumen_id).css("width", + '0' +"%");
       var formData = new FormData();
       formData.append('file', $('#'+id)[0].files[0]);
       formData.append('_token', "{{ csrf_token() }}");
   $.ajax({
       url: '{{ route('evaluasi.pelaporan.uploadFile') }}',
       type: "post",
       dataType: 'json',
       processData: false,  
      contentType: false, 
      data : formData,
      xhr: function(){
       //upload Progress
       var xhr = $.ajaxSettings.xhr();
       if (xhr.upload) {
           xhr.upload.addEventListener('progress', function(event) {
               var percent = 0;
               var position = event.loaded || event.position;
               var total = event.total;
               if (event.lengthComputable) {
                   percent = Math.ceil(position / total * 100);
               }
               $("#progressDokumenWajib"+dokumen_id).css("width", + percent +"%");
           }, true);
       }
       return xhr;
   },error: function() {
          console.log('error');   
       }
   }).done(function(url){ 
        $("#tampungdokumenWajib"+dokumen_id).html('<a href='+url+' id="valDokumenWajib'+dokumen_id+'" target="_blank"  class="fa fa-eye" > File</a>');
        $("#tampungdokumenWajib"+dokumen_id).show();
        $("#progressDivdokumenWajib"+dokumen_id).css("display", "none");
        $("#progressDivdokumenWajib"+dokumen_id).css("height", "10px");
       
   });
})
</script>

  
    
@endsection