@extends('layouts.master')

@section('title', 'IKU Daerah')

@section('breadcrumb')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">Indikator Kinerja Utama Daerah</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">Indikator Kinerja Utama Daerah</li>
            </ol>
        </div>
    </div>
@endsection


@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header text-right">
                        <a onclick="sasaranAdd()" class="btn btn-primary">
                            <i class="fa fa-plus-circle"></i> IKU
                        </a>
                    </div>
                    <div class="card-body">
                        <table id="table" class="table table-bordered table-hover dataTable dtr-inline" role="grid"
                            style="width: 100%;">
                            <thead>
                                <tr>
                                  <th style="display: none;">idsas</th>
                                    <th class="text-center" rowspan="4" style="vertical-align:middle" >NO</th>
                                    <th class="text-center" rowspan="4" style="vertical-align:middle">Keterangan</th>
                                    <th class="text-center" rowspan="4" style="vertical-align:middle; display: none;" >Sasaran Atasan</th>
                                    <th class="text-center" rowspan="4" style="vertical-align:middle" >Indikator</th>
                                    <th class="text-center" rowspan="4" style="vertical-align:middle" >Meta Indikator</th>
                                    <th class="text-center" rowspan="4" style="vertical-align:middle">Kondisi Awal</th>
                                </tr>
                                <tr>
                                  <th class="text-center" colspan="5" class="text-center" >Target</th>
                                  <th class="text-center" rowspan="3" style="vertical-align:middle">Kondisi Akhir</th>
                                  <th class="text-center" rowspan="3" style="vertical-align:middle" width="10%">Aksi</th>
                                </tr>
                                <tr>
                                  <th  class="text-center" rowspan="2">Tahun 1</th>
                                  <th  class="text-center" rowspan="2">Tahun 2</th>
                                  <th  class="text-center" rowspan="2">Tahun 3</th>
                                  <th  class="text-center" rowspan="2">Tahun 4</th>
                                  <th  class="text-center" rowspan="2">Tahun 5</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $noIku=1; @endphp
                                @foreach ($data as $iku)
                                @php $noInd=1; @endphp
                                @foreach ($iku->indikator as $ind)
                                    @if ($noInd==1)
                                    <tr>
                                        <td rowspan="{{$iku->indikator->count('id')}}">{{$noIku}}</td>
                                        <td rowspan="{{$iku->indikator->count('id')}}">{{$iku->sasaran}}</td>
                                        <td>{{$noInd}}. {{$ind->indikator}}</td>
                                        <td>{{$ind->meta_indikator}}</td>
                                        <td>{{$ind->kondisi_awal}}</td>
                                        <td>{{$ind->target_tahun1}}</td>
                                        <td>{{$ind->target_tahun2}}</td>
                                        <td>{{$ind->target_tahun3}}</td>
                                        <td>{{$ind->target_tahun4}}</td>
                                        <td>{{$ind->target_tahun5}}</td>
                                        <td>{{$ind->kondisi_akhir}}</td>
                                        <td rowspan="{{$iku->indikator->count('id')}}">
                                            <a style="cursor: pointer; margin-bottom: 5px;" onclick="sasaranEdit('{{$iku->id}}')"   class="btn btn-warning btn-xs" > <i class="fa fa-edit"></i>
                                             Sasaran
                                            </a><br>
                                             <a href="javascript:void(0)" class="btn btn-danger btn-xs" onclick="sasaranHapus('{{$iku->id}}')"  title="Hapus Sasaran"><i class="fa fa-times"> Sasaran</i>
                                           </a>
                                        </td>
                                    </tr>
                                    @else
                                        <td>{{$noInd}}. {{$ind->indikator}}</td>
                                        <td>{{$ind->meta_indikator}}</td>
                                        <td>{{$ind->kondisi_awal}}</td>
                                        <td>{{$ind->target_tahun1}}</td>
                                        <td>{{$ind->target_tahun2}}</td>
                                        <td>{{$ind->target_tahun3}}</td>
                                        <td>{{$ind->target_tahun4}}</td>
                                        <td>{{$ind->target_tahun5}}</td>
                                        <td>{{$ind->kondisi_akhir}}</td>
                                    </tr>
                                        
                                    @endif
                                    
                                 @php $noInd++; @endphp @endforeach
                               
                                    
                                 @php $noIku++; @endphp@endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalx">
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
            </div>
          </div>
        </div>
      </div>

@endsection

@section('css')
    <style>

    </style>
@endsection

@section('js')
<script>
    function sasaranHapus(id_sasaran){
       swalWithBootstrapButtons.fire({
           title: 'Anda yakin menghapus data?',
           icon: 'warning',
           showCancelButton: true,
           cancelButtonText: 'Batal',
           confirmButtonText: 'Hapus',
           reverseButtons: true
           }).then((result) => {
               if (result.isConfirmed) {
                   $.ajax({
                       url:"{{ route('iku.hapusSasaran') }}",
                       type:'POST',
                       dataType: 'json',
                       cache: false,
                       data:{id_sasaran:id_sasaran,_token: "{{ csrf_token() }}"},
                           success: function(data){
                               if (data['status']==1) {
                                    window.location.reload();
                               }else{
                                   Swal.fire({
                                       icon: 'error',
                                       title: 'Oops...',
                                       text: 'Terjadi kesalahan'
                                   });
                               }
                               
                           },
                   });
               }
       }) 
    };
</script>




<script>
    function sasaranEdit(id_sasaran){
    $.ajax({
            url:"{{ route('iku.sasaranEdit') }}",
            type:'POST',
            dataType: 'html',
            cache: false,
            data:{id_sasaran:id_sasaran,_token: "{{ csrf_token() }}"},
                success: function(data){
                var modal = $('#modalx');
                modal.modal({backdrop: 'static', keyboard: false}) 
                modal.find('.modal-title').text('Ubah IKU Daerah') 
                modal.find('.modal-body').html(data);
                modal.modal('show');
            },
        });
}
</script>

    <script>
        function sasaranAdd(){
        $.ajax({
                url:"{{ route('iku.sasaranAdd') }}",
                type:'POST',
                dataType: 'html',
                cache: false,
                data:{_token: "{{ csrf_token() }}"},
                    success: function(data){
                    var modal = $('#modalx');
                    modal.modal({backdrop: 'static', keyboard: false}) 
                    modal.find('.modal-title').text('Tambah IKU Daerah') 
                    modal.find('.modal-body').html(data);
                    modal.modal('show');
                },
            });
    }
    </script>
@endsection