@extends('be.layout-index')
@section('content')
@php
$modul="Kajian Akhir";
$modula="m_kajianakhir";
$id='';
$no='';
$id_laporan='';
$id_trendpelanggaran='';
$rekomendasi_no='';
$rekomendasi_file='';
if(isset($data)){
	$id=$data->id;
    $no=$data->no;
    $id_laporan=$data->id_laporan;
    $id_trendpelanggaran=$data->id_trendpelanggaran;
    $rekomendasi_no=$data->rekomendasi_no;
    $rekomendasi_file=$data->rekomendasi_file;
}
@endphp
<link rel="stylesheet" href="{{asset('media/assets/css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('media/assets/css/select2-bootstrap.css')}}">
<link rel="stylesheet" href="{{asset('media/css/readonly.css')}}">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<style>
.borderless tr td{
    padding:3px;
    border:0;
    text-align:left;
    background-color:transparent!important;
    font-size:10pt;
}
.borderless tr{
    background-color:transparent!important;
}
</style>
<div class="row">
   <div class="col-12">
       <div class="card">
               <div class="card-body">
            
<div class="panel-default">
    <div class="content-box-header  panel-heading">
        <div class="panel-title"></div>
    </div>
    <div class="content-box-large box-with-header">
        <form id=frm name=frm enctype="multipart/form-data" method=post action="{!!route($modula.'.save')!!}">
			@csrf
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group row required">
                        <label class="col-sm-2 control-label">Laporan</label>
                        <div class="input-group col-md-4">
							@if($id!='')
                                   <input type=hidden name=no value="{!!$no!!}">{!!$no!!}
                            @else
	                              <input class="form-control py-2" type="search" placeholder="Cari No Pelaporan" id="no" name="no">
	                              <span class="input-group-append">
	                                <button class="btn btn-outline-secondary" type="button" data-toggle="modal" data-target=".bs-example-modal-lg">
	                                    <i class="fa fa-search"></i>
	                                </button>
	                              </span><span class="col-md-12" style="margin-left:-10px" class=span_err><font class=font_err></font></span>
                            @endif
                        </div>
                    </div>
                    @if($id=='')
	                    <div class="form-group row required">
	                        <label class="col-sm-2 control-label">Kajian akhir</label>
	                        <div class="col-sm-5">
	                            <textarea name="note" id=note class="form-control" rows=4/></textarea>
	                        </div>
	                    </div>
	                    <div class="form-group row">
	                        <label class="col-sm-2 control-label">Dokumen</label>
	                        <div class="col-sm-7">
	                            <input type=file name=dokumen id=dokumen>
	                        </div>
	                    </div>
                    @endif
                    <div class="form-group row">
                        <label class="col-sm-2 control-label">Kategori</label>
                        <div class="col-sm-5">
                            <table class="table borderless" width=100%>
                             <tbody id="tbody">
                            @php
                                $index_kategori=0;
                                if(isset($m_kajiankategori)){
                                    foreach($m_kajiankategori as $item)
                                    {
                                        echo '
                                        <tr id="R'.++$index_kategori.'">
                                            <td width=1% valign=top>'.$index_kategori.'. </td>
                                            <td width=99%>
                                                 <select style="width:300px" class="form-control select2" id=id_kat1'.$index_kategori.' name=id_kat1[]  onChange="pilihTrend('.$index_kategori.')">
                                                    <option value="">- Pilih Kategori -</option>';
                                                        $kat1_sel='';
                                                        if(isset($m_kat1)){
                                                            foreach($m_kat1 as $item1)
                                                            {
                                                                if($item1->id==$item->id_kat1){
                                                                    $kat1_sel='selected';
                                                                }
                                                                else{
                                                                    $kat1_sel='';
                                                                }
                                                                echo '<option value="'.$item1->id.'" '.$kat1_sel.'>'.$item1->nama.'</option>';
                                                            }
                                                        }
                                            echo '
                                               </select><br />
                                               <div style="margin-top:0px">
                                                    <input type="hidden"  id=id_kat_trend'.$index_kategori.' name=id_kat_trend[] value="'.$item->id_kat1.', '.$item->id_trend.'">
                                                    <label class="col-sm-12 control-label">Trend</label>
                                                    <select style="width:300px" class="form-control select2" id=id_trend'.$index_kategori.' name=id_trend[] onChange="setKatTrend('.$index_kategori.')">
                                                        <option value="">- Pilih Trend -</option>';
                                                        $n_trendpelanggaran=DB::select("select id,nama from m_trendpelanggaran where id_jenislaporan=".$id_jenislaporan." and id_kat=".$item->id_kat1);
                                                          if (!empty($n_trendpelanggaran)) {
                                                              foreach ($n_trendpelanggaran as $row){
                                                                echo "<option value='".$row->id."'";
                                                                if($row->id==$item->id_trend){echo " selected ";}
                                                                echo ">".$row->nama;
                                                            }
                                                        }

                                            echo '
                                                   </select>
                                               </div><br>
                                                
                                                <div class="form-group row">
                                                    <label class="col-sm-12 control-label">No Rekomendasi</label>
                                                    <div class="col-sm-12">
                                                        <input id=rekomendasi_no'.$index_kategori.' name="rekomendasi_no[]" value="'.$item->rekomendasi_no.'"  class="form-control"/>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-sm-12 control-label">File Rekomendasi</label>
                                                    <div class="col-sm-12">
                                                        <input type=file name=rekomendasi_file'.$index_kategori.' id=rekomendasi_file'.$index_kategori.'>
                                                        <input type=hidden name=rekomendasi_fileold'.$index_kategori.' value="'.$item->rekomendasi_file.'"/>
                                                        <input type=hidden name="rekomendasi_fileidx[]" value="'.$index_kategori.'">';
                                                            if($item->rekomendasi_file!=''){
                                                                echo '<br><br><a href="'.route("download.be_ka_dk")."/".rawurlencode($item->rekomendasi_file).'" class="btn btn-primary btn-xs"><i class=" ti-download"></i> Download</a>
                                                                <input type=hidden name="rekomendasi_filetanda[]" value="'.$item->rekomendasi_file.'">';
                                                            }
                                                            else{
                                                                echo '<input type=hidden name="rekomendasi_filetanda[]" >';
                                                            }
                                                        echo '
                                                    </div>
                                                </div>
                                                
                                            </td>
                                            <td class="text-center" valign=top><button class="btn btn-xs btn-danger remove" type="button">Hapus</button></td>
                                        </tr>';
                                    }
                                }
                                @endphp
                                </tbody>
                            </table>
                        <button class="btn btn-xs btn-primary"
                          id="addBtn" type="button">
                            Tambah Kategori
                        </button>
                        </div>
                    </div>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group" style="margin-left:13px">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input name="id" type="hidden" value="{!!$id!!}"/>
                            <input type=hidden name=id_laporan id=id_laporan value="{!!$id_laporan!!}">
                            <input name="id_jenislaporan" type="hidden" value="{!!$id_jenislaporan!!}"/>
                            <button type="submit" class="btn btn-primary btn-sm" name="btnSave"><i class='fa fa-save'></i> Simpan</button>
                            <a href="javascript:history.back()" class="btn btn-warning btn-sm"><i class='fa fa-repeat'></i> Batalkan</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

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

<div id="modal_laporan" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Daftar Laporan</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="dTable" class="box-body table-responsive" style="padding:20px;">
      </div>
    </div>
  </div>
</div>
<div id=tbllaporan class="hide">
            <table width="100%" id="tblData" class="table table-hover table-striped" id="example">
                <thead>
                    <tr>
                        <td width="25%">No Laporan</td>
                        <td width="25%">Tempat Kejadian</td>
                        <td width="25%">Waktu Kejadian</td>
                        <th width="10%" style="text-align: center;">Actions</th>
                    </tr>
                </thead>
                <tbody id="show_data">
                @php
                  if (!empty($listlaporan)) {
                      foreach ($listlaporan as $row) {
                @endphp
                    <tr>
                        <td>{!!$row->no!!}</td>
                        <td>{!!$row->tempatkejadian!!}</td>
                        <td>{!!konversi_tanggal('d-M-Y H:i:s',$row->waktukejadian)!!}</td>
                        <td style="text-align: center;">
                            <a class="btn btn-primary btn-sm item_modal"  data-id="{!!$row->id!!}" data-no="{!!$row->no!!}"><i class="ti-check-box"></i> Pilih</a>
                        </td>
                    </tr>
                @php
                        }
                    }
                @endphp
                </tbody>
            </table>
</div>
<script>
var rowIdx = {!!$index_kategori!!};
// jQuery button click event to add a row.
$('#addBtn').on('click', function () {
    // Adding a row inside the tbody.
    $('#tbody').append(`
      <tr id="R${++rowIdx}">
          <td class="row-index text-center" valign=top><p>${rowIdx}.</p></td>
          <td class="row-index">
            <div style="margin-top:0px">
                <select style="width:300px" class="form-control select2" id=id_kat1${rowIdx} name=id_kat1[] onChange="pilihTrend(${rowIdx})")>
                    <option value="">- Pilih Kategori -</option>
                    @php
                        foreach($m_kat1 as $item)
                        {
                            echo '<option value="'.$item->id.'">'.$item->nama.'</option>';
                        }
                    @endphp
               </select>
           </div><br>
           <div style="margin-top:0px">
                <input type="hidden"  id=id_kat_trend${rowIdx} name=id_kat_trend[] value="">
                <select style="width:300px" class="form-control select2" id=id_trend${rowIdx} name=id_trend[] onChange="setKatTrend(${rowIdx})">
                    <option value="">- Pilih Trend -</option>
                    @php
                        foreach($m_trendpelanggaran as $item)
                        {
                            echo '<option value="'.$item->id.'">'.$item->nama.'</option>';
                        }
                    @endphp
               </select>
           </div><br>
            <div class="form-group row">
                <label class="col-sm-12 control-label">No Rekomendasi</label><br>
                <div class="col-sm-12">
                    <input name="rekomendasi_no[]" id=rekomendasi_no${rowIdx} class="form-control"/>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-12 control-label">File Rekomendasi</label><br>
                <div class="col-sm-12">
                    <input type=file name=rekomendasi_file${rowIdx} id=rekomendasi_file${rowIdx} class="form-control"/>
                    <input type=hidden name=rekomendasi_fileold${rowIdx} />
                    <input type=hidden name="rekomendasi_fileidx[]" value=${rowIdx}>
                </div>
            </div>
				            <div id=formbkn${rowIdx} style="display: none; border=1; padding-top: 10px; padding-bottom: 10px;">
				                <h6>PENERUSAN LAPORAN DUGAAN NETRALITAS ASN NON TAHAPAN</h6>
                                <div style="display: flex;">
                                    <div style="margin: 5px;">
                                        <select class="form-control select2" style="width: 80px !important;">
                                            <option selected="selected" value="nip">NIP</option>
                                            <option value="nik">NIK</option>
                                        </select>
                                    </div>
                                    <div style="display: flex; padding-top: 5px;">
                                        <input type="text" style="width: 200px; height: 35px;" id="nip" aria-describedby="NIP" maxlength="20" placeholder="Cari Nomor Induk Pegawai" value="198211122009031008">
                                    </div>
                                </div>				                                                            
                                <div style="display: flex;">
                                    <div style="margin: 5px;">
                                        <select class="form-control select2" style="width: 80px !important;">
                                            <option selected="selected" value="nip">NIP</option>
                                            <option value="nik">NIK</option>
                                        </select>
                                    </div>
                                    <div style="display: flex; padding-top: 5px;">
                                        <input type="text" style="width: 200px; height: 35px;" id="nip" aria-describedby="NIP" maxlength="20" placeholder="Cari Nomor Induk Pegawai" value="">
                                    </div>
                                    <div style="display: flex; padding-top: 5px;">
                                        <button style="height:35px;">+</button>
                                    </div>    
                                </div>				                                                            
                                
				            </div>';
            
            
          </td>
          <td class="text-center" valign=top><button class="btn btn-xs btn-danger remove" type="button">Hapus</button></td>
      </tr>`);
      $(".select2").select2();
});
$('#tbody').on('click', '.remove', function () {
  
    // Getting all the rows next to the
    // row containing the clicked button
    var child = $(this).closest('tr').nextAll();
  
    // Iterating across all the rows
    // obtained to change the index
    child.each(function () {
          
        // Getting <tr> id.
        var id = $(this).attr('id');
  
        // Getting the <p> inside the .row-index class.
        var idx = $(this).children('.row-index').children('p');
  
        // Gets the row number from <tr> id.
        var dig = parseInt(id.substring(1));
  
        // Modifying row index.
        idx.html(`${dig - 1}`);
  
        // Modifying row id.
        $(this).attr('id', `R${dig - 1}`);
    });
  
    // Removing the current row.
    $(this).closest('tr').remove();
  
    // Decreasing the total number of rows by 1.
    rowIdx--;
});
</script>
<script>
var html = "";
var dtpelapor=$('#tbllaporan').html();
$("#dTable").append(dtpelapor);
$('#tblData').dataTable({
  "bPaginate": true,
  "bLengthChange": true,
  "bFilter": true,
  "bSort": false,
  "bInfo": true,
  "bAutoWidth": true
});
$(document).ready(function(){
    $('#show_data').on('click','.item_modal',function(){
           var id = $(this).data('id');
           var no = $(this).data('no');
        $('#id_laporan').val(id)
        $('#no').val(no)
        $('#modal_laporan').modal('hide');
   });
});

    function setKatTrend(i) {
        //Build an array containing Customer records.
        var selectElement = document.getElementById('id_kat1'+i);
        var selectedValue = selectElement.value;
        var selectTrend = document.getElementById('id_trend'+i);
        console.log(i + ' value = ' + selectedValue + ', ' + selectTrend.value);
        var selectKatTrend = document.getElementById('id_kat_trend'+i);
        selectKatTrend.value = selectedValue + ', ' + selectTrend.value;
    }
    
    function pilihTrend(i) {
        //Build an array containing Customer records.
        var selectElement = document.getElementById('id_kat1'+i);
        var selectedValue = selectElement.value;
        console.log(i + ' value = ' + selectedValue);
        var selectTrend = $('#id_trend'+i); // document.getElementById('id_trend'+i);
        selectTrend.empty().trigger('change');
        
        $.ajax({
            type: "GET",
            url: "{!!route('m_kajianawal.get_trend')!!}/"+selectedValue+"/{!!$id_jenislaporan!!}",
            contentType: false,
            processData: false,
            beforeSend: function() {
            },
            success: function(msg){
                var ops =jQuery.parseJSON(msg);
                console.log(ops);
                
                option='<option value="">-Pilih-</option>'
                selectTrend.append(option).trigger('change');
                //Add the Options to the DropDownList.
                $(ops).each(function () {
                   var option = $("<option />");
        
                    //Set Customer Name in Text part.
                    option.html(this.nama);
        
                    //Set CustomerId in Value part.
                    option.val(this.id);
        
                    //Add the Option element to DropDownList.
                    selectTrend.append(option).trigger('change');
                });
                if (selectedValue == 6) {
                    console.log("form bkn");
                    $('#formbkn'+i).show();
                } else {
                    $('#formbkn'+i).hide();
                }
            },
            error: function() {
                alert('error')
            }
        });
        
    };
            
</script>

<script>
$(function() {
  $("#frm").validate({
      errorClass: "errorCssClass",
    rules: {
      no: "required",
      note: "required",
    },
    messages: {
      no: "Isikan no pelaporan",
      note: "Isikan catatan kajian akhir",
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.next('span').next('span'));      // radio/checkbox?
        } else if (element.hasClass('select2')) {
            error.insertAfter(element.next('span'));  // select2
        } else {
            error.insertAfter(element);               // default
        }
    },
    highlight: function (element, errorClass, validClass) {
        $(element).addClass(errorClass); //.removeClass(errorClass);
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
       unhighlight: function (element, errorClass, validClass) {
           $(element).removeClass(errorClass); //.addClass(validClass);
       },
    submitHandler: function(form) {
        sts=true
        let s='';
        let cnt_s=0;
        /**
        var d = $('.trendpelanggaran').map(function (i, n) {
            s+=$(n).val();
            cnt_s++;
            return $(n).val();
        }).get();
        if(s==''){
            sts=false
            alert('Trend Pelanggaran harus dipilih terlebih dahulu')
        }
        **/
        if(sts){
            if(gosubmit()){
                $("#overlay").fadeIn(300);
                var frm = document.getElementById("frm");
                frm.submit();
                /**
                var formData = new FormData(frm);
                $.ajax({
                    type: "POST",
                    url: "{!!route($modula.'.save')!!}",
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                    },
                    success: function(msg){
                        document.location.href=msg
                    },
                    error: function() {
                    }
                });
                **/
            }
        }
    }
  });
});
</script>

<script type="text/javascript">
    function AddDropDownList() {
        //Build an array containing Customer records.
        
        var ops ={!!json_encode($m_trendpelanggaran)!!};
        
        //Create a DropDownList element.
        var ddlOps = $("<select name=trendpelanggaran[] id=trendpelanggaran[] class='form-control select2 trendpelanggaran'/>");
        option='<option value="">-Pilih-</option>'
        ddlOps.append(option);
        //Add the Options to the DropDownList.
        $(ops).each(function () {
           var option = $("<option />");

            //Set Customer Name in Text part.
            option.html(this.nama);

            //Set CustomerId in Value part.
            option.val(this.id);

            //Add the Option element to DropDownList.
            ddlOps.append(option);
        });

        //Reference the container DIV.
        var dvContainer = $("#dvContainer")

        //Add the DropDownList to DIV.
        var div = $("<div style='display:flex'/>");
        div.append(ddlOps);

        //Create a Remove Button.
        var btnRemove = $("<button class='btn btn-outline-secondary' type='button' value = 'Remove'><i class='fa ti-trash'></i></button>");
        btnRemove.click(function () {
            $(this).parent().remove();
        });

        //Add the Remove Buttton to DIV.
        div.append(btnRemove);

        //Add the DIV to the container DIV.
        dvContainer.append(div);
        $(".select2").select2({ width: '320px'});
        
    };
    function f_remove(o){
        $(o).parent().remove();
    }
</script>
<script src="{{asset('media/assets/js/select2.full.js')}}"></script>
<script>
$(".select2").select2();
$('#no').attr("readonly", true);
</script>
@endsection