@extends('layouts.master')

@section('title', 'OPD')

@section('breadcrumb')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">{{$data->opd->nama_skpd}}</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Penilaian</li>
            </ol>
        </div>
    </div>
@endsection
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline collapsed-card ">
                <div class="card-header">
                    <h3 class="card-title"  data-card-widget="collapse" style="cursor: pointer;"> <i class="fas fa-bell"> </i> Pedoman Penilaian</h3>
                    <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-plus"></i>
                    </button>
                    </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="callout callout-warning">
                            <p>Pengisian jawaban dilakukan pada sub-komponen, setiap sub-komponen dinilai berdasarkan pemenuhan kualitas dari kriteria (sebagai probing), dengan pilihan jawaban AA/A/BB/B/CC/C/D/E sesuai dengan gradasi nilai, sebagai berikut:</p>
                            </div>
                    </div>
                </div>
                @foreach ($setting_pedoman as $kategori)
                    <div class="row">
                        <div class="col-md-12">
                            <table id="table" class="table table-bordered table-hover" role="grid" style="width: 100%;">
                                <thead>
                                    <tr class="bg-info">
                                        <th colspan="3" class="text-left">{{$kategori->kategori}}</th>
                                    </tr>
                                    <tr>
                                        <th class="text-center">Pilihan Jawaban</th>
                                        <th class="text-center">Nilai</th>
                                        <th class="text-center">Penjelasan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($kategori->pedomanNilai as $nilai)
                                        <tr style=" line-height: 10px;">
                                            <td>{{$nilai->pilihan}}</td>
                                            <td>{{$nilai->nilai}}</td>
                                            <td>{{$nilai->penjelasan}}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    </div>
    <div class="row">
        <div class="col-md-12">
        <div class="form-group">
            <a style="cursor: pointer;" class="btn btn-lg btn-default" href="{{$data->link_video}}" target="_blank" > <i class="fa fa-link"></i> Link Video Paparan Sakip </a>
            <a style="cursor: pointer;" class="btn btn-lg btn-default" href="{{$data->link_ppt}}" target="_blank" > <i class="fa fa-link"></i> Link Presentasi Sakip </a>
        </div>
        </div>
    </div>
        <div class="row">
            <div class="col-md-12">
                @foreach ($data->komponen->sortBy('kode') as $komponen)
                <div class="card">
                    <div class="card-header text-primary">
                        <div class="row">
                            <div class="col-md-6">
                                <h5><b> {{$komponen->kode}}. {{$komponen->komponen}}</b></h5>
                            </div>
                            <div class="col-md-6 text-right">
                                <h3> <span class="badge badge-primary right badgeKom{{$komponen->id}}">{{$komponen->nilai}}</span></h3>
                            </div>
                        </div>
                        <input type="hidden"  name="nilaiKom[{{$komponen->id}}]" id="nilaiKom{{$komponen->id}}"  nilaiKom="{{$komponen->id}}" class="form-control nilaiKom" readonly="readonly" placeholder="0" value="{{$komponen->nilai}}" >
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card card-outline card-success">
                                    <div class="card-header">
                                        <h6><b>Sub Komponen / Kriteria</b></h6> 
                                    </div>
                                    <div class="card-body" style="padding:10px;">
                                        @foreach ($data->komponenSub->where('komponen_id',$komponen->komponen_id)->sortBy('kode') as $subkomponen)
                                        <div id="accordion{{$subkomponen->id}}">
                                            <div class="card ">
                                                <div class="card-header" 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{{$subkomponen->id}}" aria-expanded="true" aria-controls="collapseOne{{$subkomponen->id}}"  class="table table-sm table-borderless"  >
                                                                <tr>
                                                                    <td class="text-success text-left"  width="5%"><b>{{$subkomponen->kode}}.</b></td>
                                                                    <td class="text-success"><b>{{$subkomponen->komponen_sub}}</b></td>
                                                                    <td width="10%" style="font-size: 20px; text-align:right;" ><p class="badge bg-success ">{{$subkomponen->bobot}}</p></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="collapseOne{{$subkomponen->id}}" class="collapse show" data-parent="#accordion{{$subkomponen->id}}" style="">
                                                    <div class="card-body">
                                                        <table  class="table table-sm"  style="width: 100%; border-top: none;">
                                                            @foreach ($data->komponenKriteria->where('komponen_sub_id',$subkomponen->komponen_sub_id)->sortBy('kode') as $kri)
                                                                <tr>
                                                                    <td>{{$kri->kode}}.</td>
                                                                    <td>{{$kri->kriteria}}</td>
                                                                </tr>
                                                            @endforeach
                                                        </table>
                                                    </div>
                                                    <div class="card-footer pt-0">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <label>Nilai</label>
                                                                <select name="nilaiHuruf[{{$subkomponen->id}}]" id="nilaiHuruf{{$subkomponen->id}}" ids="{{$subkomponen->id}}" nilaiHuruf="{{$subkomponen->id}}"  idkom="{{$komponen->id}}"  bobotKomponen="{{$subkomponen->bobot}}" class="form-control nilaiHuruf" style="width: 100%;">
                                                                    <option value="0" selected>...</option>
                                                                    @foreach ($setting_nilai as $nilai)
                                                                    @if ($nilai->predikat == $subkomponen->predikat)
                                                                        <option value="{{ $nilai->pengali }}" selected>{{ $nilai->predikat }} </option>
                                                                    @else
                                                                        <option value="{{ $nilai->pengali }}">{{ $nilai->predikat }} </option>
                                                                    @endif
                                                                       
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label>&nbsp;</label>
                                                                <input type="text"  name="nilaiSub[{{$subkomponen->id}}]" id="nilaiSub{{$subkomponen->id}}" nilaiSub="{{$subkomponen->id}}" class="form-control nilaiSub{{$komponen->id}} nilaiSub" readonly="readonly" value="{{$subkomponen->nilai}}" >
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-12 mt-3">
                                                                <label>Status</label>
                                                            <div class="form-group clearfix">
                                                                <div class="icheck-success d-inline">
                                                                <input type="radio" name="statusSub[{{$subkomponen->id}}]" id="radioSubFinal{{$subkomponen->id}}" ids="{{$subkomponen->id}}" value="1" {{$subkomponen->status==1?'checked':''}}  class="statusSub">
                                                                <label for="radioSubFinal{{$subkomponen->id}}">
                                                                    Final
                                                                </label>
                                                                </div>
                                                                <div class="icheck-warning d-inline ml-3">
                                                                    <input type="radio" name="statusSub[{{$subkomponen->id}}]" value="0" id="radioSubRev{{$subkomponen->id}}" ids="{{$subkomponen->id}}" class="statusSub"  {{$subkomponen->status==0?'checked':''}}>
                                                                    <label for="radioSubRev{{$subkomponen->id}}">
                                                                        Revisi
                                                                    </label>
                                                                </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @php
                                                            $dataLog = $logs->where('komponen_sub_id',$subkomponen->id)->sortDesc()->first()
                                                        @endphp
                                                        {{-- @dd($dataLog); --}}
                                                        <div class="row" id="rowRekomendasi{{$subkomponen->id}}" status="status{{$subkomponen->status}}" {!!$subkomponen->status==0? "style='display:none'":''!!} >
                                                            <div class="col-md-12">
                                                                <textarea class="form-control  is-valid rekomendasi" placeholder="Rekomendasi" name="rekomendasi[{{$subkomponen->id}}]"   id="rekomendasi{{$subkomponen->id}}"  rekomendasi="{{$subkomponen->id}}" style="font-weight: normal;"> @if (!empty($dataLog)){{$logs->where('komponen_sub_id',$subkomponen->id)->sortDesc()->first()->rekomendasi}} @endif </textarea>
                                                            </div>
                                                        </div>
                                                        <div class="row" id="rowCatatan{{$subkomponen->id}}" {!!$subkomponen->status==1? "style='display:none'":''!!}>
                                                            <div class="col-md-12">
                                                                <textarea class="form-control  is-warning catatan" placeholder="Temuan" name="catatan[{{$subkomponen->id}}]"   id="catatan{{$subkomponen->id}}" catatan="{{$subkomponen->id}}" >@if (!empty($dataLog)){{$logs->where('komponen_sub_id',$subkomponen->id)->sortDesc()->first()->catatan}} @endif </textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card card-outline card-info">
                                    <div class="card-header">
                                        <h6><b>Evidence</b></h6>  
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                    @foreach ($dokumenWajib->where('komponen_id',$komponen->komponen_id) as $dok)
                                        <div class="col-sm-12">
                                            <div class="card card-outline card-default">
                                                <div class="card-header">
                                                    <h6><b>{{$dok->dokumen->dokumen}}</b> <span style="color:red" >{{$dok->dokumen->status==1?'* ':''}}</span></h6>  
                                                </div>
                                                <div class="card-body">
                                                    @foreach ($data->bukti->where('dokumen_id',$dok->dokumen_id)->where('komponen_id',$dok->komponen_id)->sortByDesc('id') as $bukti)
                                                    <div class="info-box" >
                                                        <label class="info-box-icon bg-info" style="cursor: pointer; margin-top:3px; margin-bottom:0px;">
                                                            <a href="{{$bukti->link}}" target="_blank"  class="fa fa-file" ></a>
                                                        </label>
                                                        <div class="info-box-content">
                                                            @if ($bukti->dokumen_id>0)
                                                            <span class="info-box-text" style="color: red; white-space: normal;"><b>{{$bukti->dokumen->dokumen}} {{$bukti->dokumen->status==1?' * ':''}}</b></span>
                                                            @endif
                                                            <span class="info-box-text"  style="white-space: normal;">{{$bukti->keterangan}}</span>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    <div class="row">
                                            <div class="col-sm-12">
                                                <div class="card card-outline card-default">
                                                    <div class="card-header">
                                                        <h6>Dokumen Lain-Lain</h6>  
                                                    </div>
                                                    <div class="card-body">
                                                        @foreach ($data->bukti->where('dokumen_id',-1)->where('komponen_id',$dok->komponen_id)->sortByDesc('id') as $bukti)
                                                        <div class="info-box" >
                                                            <label class="info-box-icon bg-info" style="cursor: pointer; margin-top:3px; margin-bottom:0px;">
                                                                <a href="{{$bukti->link}}" target="_blank"  class="fa fa-file" ></a>
                                                            </label>
                                                            <div class="info-box-content">
                                                                @if ($bukti->dokumen_id>0)
                                                                <span class="info-box-text" style="color: red; white-space: normal;"><b>{{$bukti->dokumen->dokumen}} {{$bukti->dokumen->status==1?' * ':''}}</b></span>
                                                                @endif
                                                                <span class="info-box-text"  style="white-space: normal;">{{$bukti->keterangan}}</span>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                 </div>
                 @endforeach
               
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header text-info">
                        <h5><b>Kesimpulan Penilaian</b></h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="form-group clearfix">
                                <div class="icheck-success d-inline">
                                <input type="radio" name="status" id="statusSetuju" value="2"  {{$data->status==2 ||$data->status==1 ?'checked':''}}  {{$data->status!=2 && $data->status!=1?'disabled':''}}>
                                <label for="statusSetuju">
                                    Final
                                </label>
                                </div>
                                <div class="icheck-warning d-inline ml-3">
                                    <input type="radio" name="status" value="3" id="statusRevisi"  {{$data->status==3?'checked':''}} >
                                    <label for="statusRevisi">
                                        Revisi
                                    </label>
                                </div>
                                <div class="icheck-info d-inline ml-3">
                                    <input type="radio" name="status" value="-1" id="statusDraft">
                                    <label for="statusDraft">
                                        Draft
                                    </label>
                                </div>
                                </div>
                        </div>
                        
                        {{-- <input type="checkbox" checked value="2" id="status"   name="status" class="status" data-toggle="toggle" data-on="Final" data-off="Revisi" data-onstyle="success" data-offstyle="warning" data-size="medium"> --}}
                        <div class="row">
                        <a style="cursor: pointer; " class="btn btn-primary" id="simpan">
                            <i class="fa fa-save"></i> Simpan
                        </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
@endsection




@section('js')


<script>
    
    $('input:radio[name^="statusSub"]').change(function(){
       var id = $(this).attr('ids');
       if (this.value==1) {
            $("#rowCatatan"+id).hide();
            $("#rowRekomendasi"+id).show();
            $("#rowRekomendasi"+id).animate({
            backgroundColor: "#c2ffc2"
            }, 200).delay(200).queue(function() {
            $("#rowRekomendasi"+id).animate({
                backgroundColor: "none"
            }, 1000).dequeue();
            });
       } else {
            $("#rowRekomendasi"+id).hide();
            $("#rowCatatan"+id).show();
            $("#rowCatatan"+id).animate({
            backgroundColor: "#ffffad"
            }, 200).delay(200).queue(function() {
            $("#rowCatatan"+id).animate({
                backgroundColor: "none"
            }, 1000).dequeue();
            });
       }
       cekStatus();
       
    });
</script>

<script>
    function cekStatus(){
        setuju();
        var cekStatus=[];
        $('input:radio[name^="statusSub"]').map(function(){
          if (this.value==0) {
            if(this.checked==true){
                revisi();
            }
          }
        });
    }

    function revisi(){
        $('#statusSetuju').attr("disabled",true);
        $('#statusSetuju').prop('checked', false);
        $('#statusRevisi').prop('checked', true);
        $('#statusRevisi').attr("disabled",false);
    }
    function setuju(){
        $('#statusRevisi').attr("disabled",true);
        $('#statusRevisi').prop('checked', false);
        $('#statusSetuju').prop('checked', true);
        $('#statusSetuju').attr("disabled",false); 
    }
</script>
<script>
    $('.catatan').summernote({
        inheritPlaceholder: true,
        placeholder: true,
        toolbar: [
            ['style', ['style']],
            ['color', ['color']],
            ['para', ['ul', 'ol']],
            ['table', ['table']],
            ['insert', ['link']],
        ]
    });
    $('.rekomendasi').summernote({
        inheritPlaceholder: true,
        toolbar: [
            ['style', ['style']],
            ['color', ['color']],
            ['para', ['ul', 'ol']],
            ['table', ['table']],
            ['insert', ['link']],
        ]
    });
    $('#status').select2({
        theme: 'bootstrap4',
        placeholder: 'Pilih Status'
    });
</script>
<script>
    $(document).on('click', '#simpan', function(){

    var nilaiKom = {};
    $('.nilaiKom').each(function() {
        nilaiKom[$(this).attr('nilaiKom')] = this.value;
    });
    var nilaiSub = {};
    $('.nilaiSub').each(function() {
        nilaiSub[$(this).attr('nilaiSub')] = this.value;
    });
    var nilaiHuruf = {};
    $('.nilaiHuruf').each(function() {
        nilaiHuruf[$(this).attr('nilaiHuruf')] = $(this).find("option:selected").text();
    });
    var catatan = {};
    $('.catatan').each(function() {
        catatan[$(this).attr('catatan')] = this.value;
    });
    var rekomendasi = {};
    $('.rekomendasi').each(function() {
        rekomendasi[$(this).attr('rekomendasi')] = this.value;
    });

    var status;
    $('input[name="status"]:checked').each(function() {
        status = this.value;
    });

    var statusSub={};
    $('input[name^="statusSub"]:checked').each(function() {
        statusSub[$(this).attr('ids')] = this.value;
    });
    
    swalWithBootstrapButtons.fire({
          title: 'Anda yakin menyimpan data?',
          icon: 'question',
          showCancelButton: true,
          cancelButtonText: 'Batal',
          confirmButtonText: 'Yakin',
          reverseButtons: true
          }).then((result) => {
              if (result.isConfirmed) {
                  $.ajax({
                  url:"{{ route('evaluasi.storePenilaian') }}",
                  type:'POST',
                  dataType: 'json',
                  cache: false,
                  data:{
                      pelaporan_id:{{$data->id}},
                      nilaiKom:nilaiKom,
                      nilaiSub:nilaiSub,
                      nilaiHuruf:nilaiHuruf,
                      catatan:catatan,
                      status:status,
                      statusSub:statusSub,
                      rekomendasi:rekomendasi,
                      _token: "{{ csrf_token() }}"
                      },
                      success: function(data){
                          if (data['status']==1) {
                             window.location.href =data['pesan'];
                              }else{
                                  Swal.fire({
                                      icon: 'error',
                                      title: 'Gagal Menyimpan Data',
                                      text: data['pesan']
                                  });
                              }
                    }
              });       
          }
      })  

     
             
      });
</script>
<script>
    $(".nilaiHuruf").change(function(){
        var nilaiSubTotal=0;
        var ids = $(this).attr('ids');
        var idkom= $(this).attr('idkom');
        var pembagi = $('#nilaiHuruf'+ids).val();
        var bobotKomponen = $(this).attr('bobotKomponen');
        var nilai = parseFloat(pembagi) * parseFloat(bobotKomponen);
        $('#nilaiSub'+ids).val(nilai);
        var nilaiSub=  $('input[type="text"].nilaiSub'+idkom).each(function () {
            if ($(this).val()=='') {
                nilaiSubTotal+=0;
            } else {
                nilaiSubTotal+= parseFloat($(this).val())
            }
        });
        $('#nilaiKom'+idkom).val(nilaiSubTotal);
        $(".badgeKom"+idkom).text(nilaiSubTotal);
        
    });
</script>

@endsection