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


<div>
    @include('livewire.monev-satker-pn-sync-show-data')

  <div class="row">
    <div class="col-lg-12 mb-4">
      <div class="card card-header-actions mb-4">
        <div class="card-header">
          <span>Sync Data Monitoring Dan Evaluasi Capaian Kinerja PN</span>
            <span wire:ignore class="ms-3">
              <form id="form_tanggal">
                <select id="select3" style="width:300px;">
                    @foreach($satker as $key => $sat)
                    <option value="{{$sat->id_pn}}">{{$sat->nama_pn}}</option>
                    @endforeach
                </select>
                <select id="select2" style="width:100px;">
                    @for($year = date('Y'); $year >= 2001; $year--)
                    <option value="{{$year}}">{{$year}}</option>
                    @endfor
                </select>
            </form>
            </span>
            <span class="ms-3"><button type="submit" form="form_tanggal" class="btn btn-warning btn-sm btn-data" id="btnSync">Sync Data</button></span>
            <span class="ms-3"><button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#showDataCapaianPn" id="btnShowData" wire:click="showData()">Lihat Data</button></span>
        </div>
        <div class="card-body d-flex flex-column gap-2" id="loadingdata">
          <div>
            <span class="row_all status status-gray-50" id="row_bulan_1">
              <span class="status-dot status-dot-animated"></span>
              Jan
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_2">
              <span class="status-dot status-dot-animated"></span>
              Feb
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_3">
              <span class="status-dot status-dot-animated"></span>
              Mar
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_4">
              <span class="status-dot status-dot-animated"></span>
              Apr
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_5">
              <span class="status-dot status-dot-animated"></span>
              Mei
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_6">
              <span class="status-dot status-dot-animated"></span>
              Jun
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_7">
              <span class="status-dot status-dot-animated"></span>
              Jul
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_8">
              <span class="status-dot status-dot-animated"></span>
              Agu
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_9">
              <span class="status-dot status-dot-animated"></span>
              Sep
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_10">
              <span class="status-dot status-dot-animated"></span>
              Okt
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_11">
              <span class="status-dot status-dot-animated"></span>
              Nov
            </span>
            <span class="row_all status status-gray-50" id="row_bulan_12">
              <span class="status-dot status-dot-animated"></span>
              Des
            </span>
          </div>
          <div>
            <span class="row_all status status-gray-50" id="row_triwulan_1">
              <span class="status-dot status-dot-animated"></span>
              Tri 1
            </span>
            <span class="row_all status status-gray-50" id="row_triwulan_2">
              <span class="status-dot status-dot-animated"></span>
              Tri 2
            </span>
            <span class="row_all status status-gray-50" id="row_triwulan_3">
              <span class="status-dot status-dot-animated"></span>
              Tri 3
            </span>
            <span class="row_all status status-gray-50" id="row_triwulan_4">
              <span class="status-dot status-dot-animated"></span>
              Tri 4
            </span>
          </div>
          <div>
            <span class="row_all status status-gray-50" id="row_semester_1">
              <span class="status-dot status-dot-animated"></span>
              Sem 1
            </span>
            <span class="row_all status status-gray-50" id="row_semester_2">
              <span class="status-dot status-dot-animated"></span>
              Sem 2
            </span>
          </div>
          <div>
            <span class="row_all status status-gray-50" id="row_tahun">
              <span class="status-dot status-dot-animated"></span>
              Tahun
            </span>
          </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 myModalEl = document.getElementById('modalUbahRange');
    var byk = 1;

    function getDataBySatkerLiveTahun(year,satker){
        
        $('.btn-data').prop('disabled', true);
        let formData = [];

        formData.push({ name: "_token", value: "{{ csrf_token() }}" });
        formData.push({ name: "year", value: year });
        formData.push({ name: "satker", value: satker });
    
        $.ajax({
            type: "POST",
            data: $.param(formData),
            url: "{{url('getapi_monev_pn_report_single_tahun')}}",
            dataType: 'json',

            success: function (result, status, xhr) {
                for (const [key, value] of Object.entries(result)) {
                    $("span[id='"+key+"']").removeClass("status-gray-50").addClass("status-green");
                    $("span[id='"+key+"']").children("span.first").removeClass("status-dot-animated");
                }
                console.log(result+'---'+$.param(formData)+'---'+byk);
            },
            error: function (xhr, status, error) {
                alert(error);
            },
            complete: function () {
                byk++;

                if(byk >= 19){
                  console.log(byk);
                    byk = 1;
                    Swal.fire({
                      title: "Sukses!",
                      text: "Data berhasil di tarik",
                      icon: "success"
                    }).then((result) => {
                      $('.btn-data').prop('disabled', false);
                      $(".row_all").removeClass("status-green").addClass("status-gray-50");
                      $(".row_all").children("span.first").addClass("status-dot-animated");
                    });
                }
            }
          });
    }

    function getDataBySatkerLiveSemester(semester,year,satker){
        
        $('.btn-data').prop('disabled', true);
        let formData = [];

        formData.push({ name: "_token", value: "{{ csrf_token() }}" });
        formData.push({ name: "semester", value: semester });
        formData.push({ name: "year", value: year });
        formData.push({ name: "satker", value: satker });
    
        $.ajax({
            type: "POST",
            data: $.param(formData),
            url: "{{url('getapi_monev_pn_report_single_semester')}}",
            dataType: 'json',

            success: function (result, status, xhr) {
                for (const [key, value] of Object.entries(result)) {
                    $("span[id='"+key+"']").removeClass("status-gray-50").addClass("status-green");
                    $("span[id='"+key+"']").children("span.first").removeClass("status-dot-animated");
                }
            },
            error: function (xhr, status, error) {
                alert(error);
            },
            complete: function () {
                byk++;
                
                if(byk >= 19){
                  console.log(byk);
                    byk = 1;
                    Swal.fire({
                      title: "Sukses!",
                      text: "Data berhasil di tarik",
                      icon: "success"
                    }).then((result) => {
                      $('.btn-data').prop('disabled', false);
                      $(".row_all").removeClass("status-green").addClass("status-gray-50");
                      $(".row_all").children("span.first").addClass("status-dot-animated");
                    });
                }
            }
          });
    }

    function getDataBySatkerLiveTriwulan(triwulan,year,satker){
        
        $('.btn-data').prop('disabled', true);
        let formData = [];

        formData.push({ name: "_token", value: "{{ csrf_token() }}" });
        formData.push({ name: "triwulan", value: triwulan });
        formData.push({ name: "year", value: year });
        formData.push({ name: "satker", value: satker });
    
        $.ajax({
            type: "POST",
            data: $.param(formData),
            url: "{{url('getapi_monev_pn_report_single_triwulan')}}",
            dataType: 'json',

            success: function (result, status, xhr) {
                for (const [key, value] of Object.entries(result)) {
                    $("span[id='"+key+"']").removeClass("status-gray-50").addClass("status-green");
                    $("span[id='"+key+"']").children("span.first").removeClass("status-dot-animated");
                }
            },
            error: function (xhr, status, error) {
                alert(error);
            },
            complete: function () {
                byk++;
                
                if(byk >= 19){
                  console.log(byk);
                    byk = 1;
                    Swal.fire({
                      title: "Sukses!",
                      text: "Data berhasil di tarik",
                      icon: "success"
                    }).then((result) => {
                      $('.btn-data').prop('disabled', false);
                      $(".row_all").removeClass("status-green").addClass("status-gray-50");
                      $(".row_all").children("span.first").addClass("status-dot-animated");
                    });
                }
            }
          });
    }

    function getDataBySatkerLiveBulan(bulan,year,satker){
        
        $('.btn-data').prop('disabled', true);
        let formData = [];

        formData.push({ name: "_token", value: "{{ csrf_token() }}" });
        formData.push({ name: "month", value: bulan });
        formData.push({ name: "year", value: year });
        formData.push({ name: "satker", value: satker });
    
        $.ajax({
            type: "POST",
            data: $.param(formData),
            url: "{{url('getapi_monev_pn_report_single_bulan')}}",
            dataType: 'json',

            success: function (result, status, xhr) {
                for (const [key, value] of Object.entries(result)) {
                    console.log(key);
                    $("span[id='"+key+"']").removeClass("status-gray-50").addClass("status-green");
                    $("span[id='"+key+"']").children("span.first").removeClass("status-dot-animated");
                }
            },
            error: function (xhr, status, error) {
                alert(error);
            },
            complete: function () {
                byk++;
                
                if(byk >= 19){
                    console.log(byk);
                    byk = 1;
                    Swal.fire({
                      title: "Sukses!",
                      text: "Data berhasil di tarik",
                      icon: "success"
                    }).then((result) => {
                      $('.btn-data').prop('disabled', false);
                      $(".row_all").removeClass("status-green").addClass("status-gray-50");
                      $(".row_all").children("span.first").addClass("status-dot-animated");
                    });
                }
            }
          });
    }

    $(document).ready(function () {
        
        $('#select2').select2();
            $('#select2').on('change', function (e) {
                var data = $('#select2').select2("val");
            @this.set('vYear', data);
            });

        $('#select3').select2();
            $('#select3').on('change', function (e) {
                var data = $('#select3').select2("val");
            @this.set('vSatker', data);
            });

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

            let year;

            event.preventDefault();
          
            year = $('#select2').val();
            satker = $('#select3').val();

            console.log(year);
            
            getDataBySatkerLiveTahun(year,satker);
            getDataBySatkerLiveSemester('1',year,satker);
            getDataBySatkerLiveSemester('2',year,satker);
            getDataBySatkerLiveTriwulan('1',year,satker);
            getDataBySatkerLiveTriwulan('2',year,satker);
            getDataBySatkerLiveTriwulan('3',year,satker);
            getDataBySatkerLiveTriwulan('4',year,satker);

            @php
                $bulan= 1;
            @endphp

            @for($x=1; $x<=12 ; $x++)
                // Looping Bulan
                @php
                $bulan = str_pad($x, 2, '0', STR_PAD_LEFT);
                @endphp
                getDataBySatkerLiveBulan("{{$bulan}}",year,satker);
            @endfor
        })
    });
</script>
@endpush