@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;">No</th>
                                    <th style="min-width:100px; text-align: center;vertical-align: middle;">
                                        SASARAN STRATEGI</th>
                                    <th style="min-width:100px; text-align: center;vertical-align: middle;" colspan="2">
                                        INDIKATOR KINERJA</th>
                                    <th style="min-width:140px; text-align: center;vertical-align: middle;">
                                        1</th>
                                    <th style="min-width:140px; text-align: center;vertical-align: middle;">
                                        2</th>
                                    <th style="min-width:140px; text-align: center;vertical-align: middle;">
                                        3</th>
                                    <th style="min-width:100px; text-align: center;vertical-align: middle;">
                                        TARGET (%)</th>
                                    <th style="min-width:100px; text-align: center;vertical-align: middle;">
                                        REALISASI (%)</th>
                                    <th style="min-width:100px; text-align: center;vertical-align: middle;">
                                        CAPAIAN (%)</th>
                                </tr>
                                
                            </thead>
                            <tbody>
                                @foreach ($sasaran as $key => $sas)
                                <tr>
                                    <td style="text-align: center;vertical-align: top;" rowspan="{{$sas->refindikator->count()}}">{{$key+1}}</td>
                                    <td style="vertical-align: top;" rowspan="{{$sas->refindikator->count()}}">{{$sas->nama}}</td>
                                    @if($sas->refindikator->isNotEmpty())
                                        <td>1</td>
                                        <td>{{$sas->refindikator[0]->nama}}</td>
                                        <td class="cell_data" id="row_{{$sas->refindikator[0]->id}}_1_ket" style="text-align: center;">0</td>
                                        <td class="cell_data" id="row_{{$sas->refindikator[0]->id}}_2_ket" style="text-align: center;">0</td>
                                        <td class="cell_data" id="row_{{$sas->refindikator[0]->id}}_3_ket" style="text-align: center;">0</td>
                                        <td class="text-success font-weight-bold cell_data" id="row_{{$sas->refindikator[0]->id}}_4" style="text-align: center;">0</td>
                                        <td class="text-success font-weight-bold cell_data" id="row_{{$sas->refindikator[0]->id}}_5" style="text-align: center;">0%</td>
                                        <td class="text-success font-weight-bold cell_data" id="row_{{$sas->refindikator[0]->id}}_6" style="text-align: center;">0%</td>
                                    @else
                                        <td colspan="8" style="text-align: center;">No indicators available</td>
                                    @endif
                                </tr>
                                    @if($sas->refindikator->count() > 1)
                                        @for($i = 1; $i < $sas->refindikator->count(); $i++)
                                        <tr>
                                            <td>{{$i+1}}</td>
                                            <td>{{$sas->refindikator[$i]->nama}}</td>
                                            <td class="cell_data" id="row_{{$sas->refindikator[$i]->id}}_1_ket" style="text-align: center;">0</td>
                                            <td class="cell_data" id="row_{{$sas->refindikator[$i]->id}}_2_ket" style="text-align: center;">0</td>
                                            <td class="cell_data" id="row_{{$sas->refindikator[$i]->id}}_3_ket" style="text-align: center;">0</td>
                                            <td class="text-success font-weight-bold cell_data" id="row_{{$sas->refindikator[$i]->id}}_4" style="text-align: center;">0</td>
                                            <td class="text-success font-weight-bold cell_data" id="row_{{$sas->refindikator[$i]->id}}_5" style="text-align: center;">0%</td>
                                            <td class="text-success font-weight-bold cell_data" id="row_{{$sas->refindikator[$i]->id}}_6" style="text-align: center;">0%</td>
                                        </tr>
                                        @endfor
                                    @endif
                                @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>
    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(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: "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_pt_single')}}",
            dataType: 'json',

            success: function (result, status, xhr) {
                for (const [key, value] of Object.entries(result)) {
                    $('#dataTable').find("td[id='"+key+"']").html(value);
                }
            },
            error: function (xhr, status, error) {
                alert(error);
            },
            complete: function () {
              console.log('Done');
            $('.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>`);

        getDataBySatkerLive(month_start_first,year_start_first,month_end_first,year_end_first);


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

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

            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>`);

            getDataBySatkerLive(month_start,year_start,month_end,year_end);
        
        })
    });
</script>
@endpush