@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

<div>
    <div class="modal" id="modalUbahRange" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Range</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form_tanggal">
                    <div class="modal-body">
                        <div class="d-flex flex-row mb-2 justify-content-center gap-3">
                            <select name="month_start" id="month_start" class="select2" style="width:140px;">
                                <option value="01" selected="selected">Januari</option>
                                <option value="02">Februari</option>
                                <option value="03">Maret</option>
                                <option value="04">April</option>
                                <option value="05">Mei</option>
                                <option value="06">Juni</option>
                                <option value="07">Juli</option>
                                <option value="08">Agustus</option>
                                <option value="09">September</option>
                                <option value="10">Oktober</option>
                                <option value="11">November</option>
                                <option value="12">Desember</option>
                            </select>
                            <select name="year_start" id="year_start" class="select2" style="width:140px;">
                                <option value="{{date('Y')}}" selected="selected">{{date('Y')}}</option>
                                @for($year = date('Y'); $year >= 2001; $year--)
                                <option value="{{$year-1}}">{{$year-1}}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="d-flex flex-row mb-2 justify-content-center gap-3">
                            S/D
                        </div>
                        <div class="d-flex flex-row mb-2 justify-content-center gap-3">
                            <select name="month_end" id="month_end" class="select2" style="width:140px;">
                                <option value="01" {{date('m') == '01' ? 'selected' : ''}}>Januari</option>
                                <option value="02" {{date('m') == '02' ? 'selected' : ''}}>Februari</option>
                                <option value="03" {{date('m') == '03' ? 'selected' : ''}}>Maret</option>
                                <option value="04" {{date('m') == '04' ? 'selected' : ''}}>April</option>
                                <option value="05" {{date('m') == '05' ? 'selected' : ''}}>Mei</option>
                                <option value="06" {{date('m') == '06' ? 'selected' : ''}}>Juni</option>
                                <option value="07" {{date('m') == '07' ? 'selected' : ''}}>Juli</option>
                                <option value="08" {{date('m') == '08' ? 'selected' : ''}}>Agustus</option>
                                <option value="09" {{date('m') == '09' ? 'selected' : ''}}>September</option>
                                <option value="10" {{date('m') == '10' ? 'selected' : ''}}>Oktober</option>
                                <option value="11" {{date('m') == '11' ? 'selected' : ''}}>November</option>
                                <option value="12" {{date('m') == '12' ? 'selected' : ''}}>Desember</option>
                            </select>
                            <select name="year_end" id="year_end" class="select2" style="width:140px;">
                                <option value="{{date('Y')}}" selected="selected">{{date('Y')}}</option>
                                @for($year = date('Y'); $year >= 2001; $year--)
                                <option value="{{$year-1}}">{{$year-1}}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Lihat Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 mb-4">
            <div class="card card-header-actions mb-4">
                <div class="card-header">
                    <span>Capaian Kinerja Pengadilan Negeri</span>
                    <span class="ms-3 fw-bold" id="periode">Januari 2024 s/d Desember 2024</span>
                    <span class="ms-3"><button type="button" class="btn btn-primary btn-sm btn-data" data-bs-toggle="modal"
                            data-bs-target="#modalUbahRange">Ubah Range</button></span>
                    <span class="ms-3"><button type="submit" form="form_tanggal" class="btn btn-secondary btn-sm btn-data" id="btnRefresh">Refresh
                            Data</button></span>
                </div>
                <div class="card-body">
                    <div class="loading pb-3" style="display: none;">
                        <div class="mb-2">(2/6) Loading ...</div>
                        <div class="progress">
                            <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38"
                                aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
                                <span class="visually-hidden">38% Complete</span>
                            </div>
                        </div>
                    </div>
                    <div class="datatable" style="overflow-y: scroll;">
                        <table class="table table-bordered table-hover" id="dataTable" width="150%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th style="text-align: center;vertical-align: middle;" rowspan="2">No</th>
                                    <th style="min-width:100px; text-align: center;vertical-align: middle;" rowspan="2">
                                        Pengadilan Tingkat Pertama</th>
                                    <th style="text-align: center;vertical-align: middle;" rowspan="2">Periode Pemilihan
                                        Laporan</th>
                                        @foreach ($indikator as $ind)
                                    <th style="text-align: center;vertical-align: middle;" colspan="4">{{$ind->nama}}</th>
                                        @endforeach
                                    <th style="text-align: center;vertical-align: middle;">Last Update
                                    </th>
                                </tr>
                                <tr>
                                    <th style="text-align: center;vertical-align: middle;">Total (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Tpt Wktu (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Tpt Wktu (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Tpt Wktu (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Tpt Wktu (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total Permohonan RJ (Pkr)
                                    </th>
                                    <th style="text-align: center;vertical-align: middle;">Selesai RJ (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total Putus (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">UH Banding (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total Total Putus (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">UH Kasasi (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Pengajuan Diversi (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Diversi Berhasil (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">IKM</th>
                                    <th style="text-align: center;vertical-align: middle;">Konversi IKM</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total Salput Perdata (Pkr)
                                    </th>
                                    <th style="text-align: center;vertical-align: middle;">Pengiriman TW (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total Salput Perdata (Pkr)
                                    </th>
                                    <th style="text-align: center;vertical-align: middle;">Pengiriman TW (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Total Gugatan (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Mediasi Berhasil (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Permohonan Prodeo (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Putus Prodeo (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Jumlah Perkara (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Putus (Pkr)</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Permohonan Posbakum</th>
                                    <th style="text-align: center;vertical-align: middle;">Permohonan Dilayani</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Permohonan Eksekusi</th>
                                    <th style="text-align: center;vertical-align: middle;">Pelaksanaan Eksekusi</th>
                                    <th style="text-align: center;vertical-align: middle;">Target (%)</th>
                                    <th style="text-align: center;vertical-align: middle;">Realisasi (%)</th>
                                    <th>15</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($satker as $key => $sat)
                                <tr id="sat_{{$sat->id_pn}}" data-url="{{$sat->url_evakip}}">
                                    <td style="text-align: center;vertical-align: middle;">{{$key+1}}</td>
                                    <td>{{$sat->nama_pn}}</td>
                                    <td style="text-align: center;vertical-align: middle;" class="periodetext"></td>
                                    
                                    @foreach ($indikator as $ind)
                                    <td id="row_{{$sat->id_pn}}_{{$ind->id}}_1" style="text-align: center;vertical-align: middle;" class="cell_data">0</td>
                                    <td id="row_{{$sat->id_pn}}_{{$ind->id}}_2" style="text-align: center;vertical-align: middle;" class="cell_data">0</td>
                                    <td id="row_{{$sat->id_pn}}_{{$ind->id}}_3" style="text-align: center;vertical-align: middle;" class="text-success font-weight-bold cell_data">0%</td>
                                    <td id="row_{{$sat->id_pn}}_{{$ind->id}}_4" style="text-align: center;vertical-align: middle;" class="text-success font-weight-bold cell_data">0%</td>
                                    @endforeach
                                    
                                    <td id="row_{{$sat->id_pn}}_update"  style="text-align: center;vertical-align: middle;" class="cell_data">2024-09-17 18:46:26</td>
                                    
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    var byk = 0;
    const arrBulan = {
        '01': 'Januari',
        '02': 'Februari',
        '03': 'Maret',
        '04': 'April',
        '05': 'Mei',
        '06': 'Juni',
        '07': 'Juli',
        '08': 'Agustus',
        '09': 'September',
        '10': 'Oktober',
        '11': 'November',
        '12': 'Desember'
    }

    function getDataBySatkerLive(satker_code,start_month,start_year,end_month,end_year){
        
        $('.btn-data').prop('disabled', true);
        let formData = [];

        formData.push({ name: "_token", value: "{{ csrf_token() }}" });
        formData.push({ name: "satker_code", value: satker_code });
        formData.push({ name: "start_month", value: start_month });
        formData.push({ name: "start_year", value: start_year });
        formData.push({ name: "end_month", value: end_month });
        formData.push({ name: "end_year", value: end_year });
    
        $.ajax({
            type: "POST",
            data: $.param(formData),
            url: "{{url('getapi_monev_satker_single')}}",
            dataType: 'json',

            success: function (result, status, xhr) {
                for (const [key, value] of Object.entries(result)) {
                    $('#sat_'+satker_code+'').find("td[id='"+key+"']").html(value);
                }
            },
            error: function (xhr, status, error) {
                alert(error);
            },
            complete: function () {
              console.log('Done');
              byk--;
              if(byk <= 0){
                  $('.btn-data').prop('disabled', false);
              }
            }
          });
    }

    $(document).ready(function () {
        $(".select2").select2({
            dropdownParent: $('#modalUbahRange'),
            allowClear: true
        });

        let month_start_first;
        let month_end_first;
        let year_start_first;
        let year_end_first;
        
        month_start_first = $('#month_start').val();
        month_end_first = $('#month_end').val();
        year_start_first = $('#year_start').val();
        year_end_first = $('#year_end').val();

        $('#periode').text(arrBulan[month_start_first] + ' ' + year_start_first + ' s/d ' + arrBulan[month_end_first] + ' ' + year_end_first);
        $('.periodetext').html(month_start_first+'-'+year_start_first + '<br>s/d<br>' + month_end_first + '-' + year_end_first);
        $(".cell_data").html(`<div class="spinner-border"></div>`);

        @foreach($satker as $sat)
            //Looping Satker
            byk++;
            getDataBySatkerLive('{{$sat->id_pn}}',month_start_first,year_start_first,month_end_first,year_end_first);
        @endforeach

        console.log(byk);

        $("#form_tanggal").submit(function( event ){

            let month_start;
            let month_end;
            let year_start;
            let year_end;

            byk = 0;

            event.preventDefault();
            
            month_start = $('#month_start').val();
            month_end = $('#month_end').val();
            year_start = $('#year_start').val();
            year_end = $('#year_end').val();

            $('#periode').text(arrBulan[month_start] + ' ' + year_start + ' s/d ' + arrBulan[month_end] + ' ' + year_end);
            $('.periodetext').html(month_start+'-'+year_start + '<br>s/d<br>' + month_end + '-' + year_end);
            $(".cell_data").html(`<div class="spinner-border"></div>`);

            @foreach($satker as $sat)
                //Looping Satker
                byk++;
                getDataBySatkerLive('{{$sat->id_pn}}',month_start,year_start,month_end,year_end);
            @endforeach
        })
    });
</script>
@endpush