@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.rep-pn-modal')
  @include('livewire.rep-pn-upload-modal')
  @include('livewire.rep-pn-hapus-modal')
  
  @include('livewire.rep-pn-semester-modal')
  @include('livewire.rep-pn-upload-semester-modal')
  @include('livewire.rep-pn-hapus-semester-modal')
  
  @include('livewire.rep-pn-triwulan-modal')
  @include('livewire.rep-pn-upload-triwulan-modal')
  @include('livewire.rep-pn-hapus-triwulan-modal')
  
  @include('livewire.rep-pn-bulan-modal')
  @include('livewire.rep-pn-upload-bulan-modal')
  @include('livewire.rep-pn-hapus-bulan-modal')

  <div class="modal" id="successModal" tabindex="-1">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="modal-status bg-success"></div>
        <div class="modal-body text-center py-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-green icon-lg" style="width:24" height="24"
            viewBox="0 0 24 24" stroke-style="width:2" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <circle cx="12" cy="12" r="9" />
            <path d="M9 12l2 2l4 -4" />
          </svg>
          <h3>Data Selesai Di Tarik</h3>
        </div>
        <div class="modal-footer">
          <div class="w-100">
            <div class="row">
              <div class="col">
                <a href="#" class="btn w-100" data-bs-dismiss="modal">
                  Go to dashboard
                </a>
              </div>
              <div class="col">
                <a href="#" class="btn btn-success w-100" data-bs-dismiss="modal">
                  Tutup
                </a>
              </div>
            </div>
          </div>
        </div>
      </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>Laporan Monitoring Dan Evaluasi Capaian Kinerja {{ucwords(strtolower($vsatkernama))}}</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;" wire:model="vyear">
                  @for($year = date('Y'); $year >= 2001; $year--)
                  <option value="{{$year}}">{{$year}}</option>
                  @endfor
              </select>
          </form>
          </span>
        </div>
        <div class="card-body" id="loadingdata">

          <h4>Laporan Capaian Kinerja Tahun {{$this->vyear}}</h4>
          <div class="table-responsive mb-4">
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th style="min-width:150px; width:150px">Tahun</th>
                  <th style="width:50%">Download</th>
                  <th style="width:50%">Upload</th>
                  <th style="width:50px">Opsi</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-center">{{$this->vyear}}</td>
                  @if($data_tahun)
                  <td>
                    <div class="d-flex">
                      <div>
                        <button type="button" class="btn btn-warning btn-sm me-2" wire:click ="generateDocTahun()">Re-Generate</button>
                      </div>
                      <div>
                        <div>
                          <a href="{{url('reports/'.$data_tahun->link_download)}}">{{$data_tahun->link_download}}</a>
                        </div>
                        <div>
                          <small>Generate date: {{$data_tahun->generate_at}}</small>
                        </div>
                      </div>
                    </div>
                  </td>
                  @if($data_tahun->link_upload)
                  <td>
                    <div class="d-flex">
                      <div>
                        <button type="button" class="btn btn-warning btn-sm me-2" data-bs-toggle="modal" data-bs-target="#tahunUploadModal">Re-Upload</button>
                      </div>
                      <div>
                        <div>
                          <a href="{{url('uploads/'.$data_tahun->link_upload)}}">{{$data_tahun->link_upload}}</a>
                        </div>
                        <div>
                          <small>Upload date: {{$data_tahun->upload_at}}</small>
                        </div>
                      </div>

                    </div>
                  </td>
                  @else
                  <td>
                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tahunUploadModal">Upload</button>
                  </td>
                  @endif
                  <td>
                    <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#hapusTahunModal">Hapus</button>
                  </td>
                  @else
                  <td colspan="4"><button type="button" class="btn btn-primary btn-sm" wire:click ="generateDocTahun()" >Generate</button></td>
                  @endif
                </tr>
              </tbody>
            </table>
          </div>

          <h4>Laporan Capaian Kinerja Semester {{$this->vyear}}</h4>

          <div class="table-responsive mb-4">
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th style="min-width:72px;width:72px">Tahun</th>
                  <th style="min-width:72px; width:72px">Semester</th>
                  <th style="width:50%">Download</th>
                  <th style="width:50%">Upload</th>
                  <th style="width:50px">Opsi</th>
                </tr>
              </thead>
              <tbody>

                <tr>
                  <td class="text-center">{{$this->vyear}}</td>
                  <td class="text-center">1</td>
                  @if($data_semester_1)
                  <td>
                    <div class="d-flex">
                      <div>
                        <button type="button" class="btn btn-warning btn-sm me-2"   wire:click ="generateDocSemester(1)">Re-Generate</button>
                      </div>
                      <div>
                        <div>
                          <a href="{{url('reports/'.$data_semester_1->link_download)}}">{{$data_semester_1->link_download}}</a>
                        </div>
                        <div>
                          <small>Generate date: {{$data_semester_1->generate_at}}</small>
                        </div>
                      </div>
                    </div>
                  </td>
                  @if($data_semester_1->link_upload)
                  <td>
                    <div class="d-flex">
                      <div>
                        <button type="button" class="btn btn-warning btn-sm me-2" data-bs-toggle="modal" data-bs-target="#semesterUploadModal" wire:click ="openSaveSemesterUpload(1)">Re-Upload</button>
                      </div>
                      <div>
                        <div>
                          <a href="{{url('uploads/'.$data_semester_1->link_upload)}}">{{$data_semester_1->link_upload}}</a>
                        </div>
                        <div>
                          <small>Upload date: {{$data_semester_1->upload_at}}</small>
                        </div>
                      </div>

                    </div>
                  </td>
                  @else
                  <td>
                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#semesterUploadModal" wire:click ="openSaveSemesterUpload(1)">Upload</button>
                  </td>
                  @endif
                  <td>
                    <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#hapusSemesterModal" wire:click ="openHapusSemester(1)">Hapus</button>
                  </td>
                  @else
                  <td colspan="4"><button type="button" class="btn btn-primary btn-sm"  wire:click ="generateDocSemester(1)" >Generate</button></td>
                  @endif
                </tr>

                <tr>
                  <td class="text-center">{{$this->vyear}}</td>
                  <td class="text-center">2</td>
                  @if($data_semester_2)
                  <td>
                    <div class="d-flex">
                      <div>
                        <button type="button" class="btn btn-warning btn-sm me-2"   wire:click ="generateDocSemester(2)">Re-Generate</button>
                      </div>
                      <div>
                        <div>
                          <a href="{{url('reports/'.$data_semester_2->link_download)}}">{{$data_semester_2->link_download}}</a>
                        </div>
                        <div>
                          <small>Generate date: {{$data_semester_2->generate_at}}</small>
                        </div>
                      </div>
                    </div>
                  </td>
                  @if($data_semester_2->link_upload)
                  <td>
                    <div class="d-flex">
                      <div>
                        <button type="button" class="btn btn-warning btn-sm me-2" data-bs-toggle="modal" data-bs-target="#semesterUploadModal" wire:click ="openSaveSemesterUpload(2)">Re-Upload</button>
                      </div>
                      <div>
                        <div>
                          <a href="{{url('uploads/'.$data_semester_2->link_upload)}}">{{$data_semester_2->link_upload}}</a>
                        </div>
                        <div>
                          <small>Upload date: {{$data_semester_2->upload_at}}</small>
                        </div>
                      </div>

                    </div>
                  </td>
                  @else
                  <td>
                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#semesterUploadModal" wire:click ="openSaveSemesterUpload(2)">Upload</button>
                  </td>
                  @endif
                  <td>
                    <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#hapusSemesterModal" wire:click ="openHapusSemester(2)">Hapus</button>
                  </td>
                  @else
                  <td colspan="4"><button type="button" class="btn btn-primary btn-sm"  wire:click ="generateDocSemester(2)" >Generate</button></td>
                  @endif
                </tr>
              </tbody>
            </table>
          </div>

          <h4>Laporan Capaian Kinerja Triwulan {{$this->vyear}}</h4>

          <div class="table-responsive mb-4">
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th style="min-width:72px;width:72px">Tahun</th>
                  <th style="min-width:72px; width:72px">Triwulan</th>
                  <th style="width:50%">Download</th>
                  <th style="width:50%">Upload</th>
                  <th style="width:50px">Opsi</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-center">{{$this->vyear}}</td>
                  <td class="text-center">1</td>
                  @if($data_triwulan_1)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2"
                                  wire:click="generateDocTriwulan(1)">Re-Generate</button>
                          </div>
                          <div>
                              <div>
                                  <a
                                      href="{{url('reports/'.$data_triwulan_1->link_download)}}">{{$data_triwulan_1->link_download}}</a>
                              </div>
                              <div>
                                  <small>Generate date: {{$data_triwulan_1->generate_at}}</small>
                              </div>
                          </div>
                      </div>
                  </td>
                  @if($data_triwulan_1->link_upload)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2" data-bs-toggle="modal"
                                  data-bs-target="#triwulanUploadModal" wire:click="openSaveTriwulanUpload(1)">Re-Upload</button>
                          </div>
                          <div>
                              <div>
                                  <a href="{{url('uploads/'.$data_triwulan_1->link_upload)}}">{{$data_triwulan_1->link_upload}}</a>
                              </div>
                              <div>
                                  <small>Upload date: {{$data_triwulan_1->upload_at}}</small>
                              </div>
                          </div>
              
                      </div>
                  </td>
                  @else
                  <td>
                      <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                          data-bs-target="#triwulanUploadModal" wire:click="openSaveTriwulanUpload(1)">Upload</button>
                  </td>
                  @endif
                  <td>
                      <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#hapusTriwulanModal"
                          wire:click="openHapusTriwulan(1)">Hapus</button>
                  </td>
                  @else
                  <td colspan="4"><button type="button" class="btn btn-primary btn-sm"
                          wire:click="generateDocTriwulan(1)">Generate</button></td>
                  @endif
              </tr>
              
              <tr>
                  <td class="text-center">{{$this->vyear}}</td>
                  <td class="text-center">2</td>
                  @if($data_triwulan_2)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2"
                                  wire:click="generateDocTriwulan(2)">Re-Generate</button>
                          </div>
                          <div>
                              <div>
                                  <a
                                      href="{{url('reports/'.$data_triwulan_2->link_download)}}">{{$data_triwulan_2->link_download}}</a>
                              </div>
                              <div>
                                  <small>Generate date: {{$data_triwulan_2->generate_at}}</small>
                              </div>
                          </div>
                      </div>
                  </td>
                  @if($data_triwulan_2->link_upload)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2" data-bs-toggle="modal"
                                  data-bs-target="#triwulanUploadModal" wire:click="openSaveTriwulanUpload(2)">Re-Upload</button>
                          </div>
                          <div>
                              <div>
                                  <a href="{{url('uploads/'.$data_triwulan_2->link_upload)}}">{{$data_triwulan_2->link_upload}}</a>
                              </div>
                              <div>
                                  <small>Upload date: {{$data_triwulan_2->upload_at}}</small>
                              </div>
                          </div>
              
                      </div>
                  </td>
                  @else
                  <td>
                      <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                          data-bs-target="#triwulanUploadModal" wire:click="openSaveTriwulanUpload(2)">Upload</button>
                  </td>
                  @endif
                  <td>
                      <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#hapusTriwulanModal"
                          wire:click="openHapusTriwulan(2)">Hapus</button>
                  </td>
                  @else
                  <td colspan="4"><button type="button" class="btn btn-primary btn-sm"
                          wire:click="generateDocTriwulan(2)">Generate</button></td>
                  @endif
              </tr>
              
              <tr>
                  <td class="text-center">{{$this->vyear}}</td>
                  <td class="text-center">3</td>
                  @if($data_triwulan_3)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2"
                                  wire:click="generateDocTriwulan(3)">Re-Generate</button>
                          </div>
                          <div>
                              <div>
                                  <a
                                      href="{{url('reports/'.$data_triwulan_3->link_download)}}">{{$data_triwulan_3->link_download}}</a>
                              </div>
                              <div>
                                  <small>Generate date: {{$data_triwulan_3->generate_at}}</small>
                              </div>
                          </div>
                      </div>
                  </td>
                  @if($data_triwulan_3->link_upload)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2" data-bs-toggle="modal"
                                  data-bs-target="#triwulanUploadModal" wire:click="openSaveTriwulanUpload(3)">Re-Upload</button>
                          </div>
                          <div>
                              <div>
                                  <a href="{{url('uploads/'.$data_triwulan_3->link_upload)}}">{{$data_triwulan_3->link_upload}}</a>
                              </div>
                              <div>
                                  <small>Upload date: {{$data_triwulan_3->upload_at}}</small>
                              </div>
                          </div>
              
                      </div>
                  </td>
                  @else
                  <td>
                      <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                          data-bs-target="#triwulanUploadModal" wire:click="openSaveTriwulanUpload(3)">Upload</button>
                  </td>
                  @endif
                  <td>
                      <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#hapusTriwulanModal"
                          wire:click="openHapusTriwulan(3)">Hapus</button>
                  </td>
                  @else
                  <td colspan="4"><button type="button" class="btn btn-primary btn-sm"
                          wire:click="generateDocTriwulan(3)">Generate</button></td>
                  @endif
              </tr>
              
              <tr>
                  <td class="text-center">{{$this->vyear}}</td>
                  <td class="text-center">4</td>
                  @if($data_triwulan_4)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2"
                                  wire:click="generateDocTriwulan(4)">Re-Generate</button>
                          </div>
                          <div>
                              <div>
                                  <a
                                      href="{{url('reports/'.$data_triwulan_4->link_download)}}">{{$data_triwulan_4->link_download}}</a>
                              </div>
                              <div>
                                  <small>Generate date: {{$data_triwulan_4->generate_at}}</small>
                              </div>
                          </div>
                      </div>
                  </td>
                  @if($data_triwulan_4->link_upload)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2" data-bs-toggle="modal"
                                  data-bs-target="#triwulanUploadModal" wire:click="openSaveTriwulanUpload(4)">Re-Upload</button>
                          </div>
                          <div>
                              <div>
                                  <a href="{{url('uploads/'.$data_triwulan_4->link_upload)}}">{{$data_triwulan_4->link_upload}}</a>
                              </div>
                              <div>
                                  <small>Upload date: {{$data_triwulan_4->upload_at}}</small>
                              </div>
                          </div>
              
                      </div>
                  </td>
                  @else
                  <td>
                      <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                          data-bs-target="#triwulanUploadModal" wire:click="openSaveTriwulanUpload(4)">Upload</button>
                  </td>
                  @endif
                  <td>
                      <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#hapusTriwulanModal"
                          wire:click="openHapusTriwulan(4)">Hapus</button>
                  </td>
                  @else
                  <td colspan="4"><button type="button" class="btn btn-primary btn-sm"
                          wire:click="generateDocTriwulan(4)">Generate</button></td>
                  @endif
              </tr>
              </tbody>
            </table>
          </div>

          <h4>Laporan Capaian Kinerja Bulan {{$this->vyear}}</h4>

          <div class="table-responsive mb-4">
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th style="min-width:72px;width:72px">Tahun</th>
                  <th style="min-width:72px; width:72px">Bulan</th>
                  <th style="width:50%">Download</th>
                  <th style="width:50%">Upload</th>
                  <th style="width:50px">Opsi</th>
                </tr>
              </thead>
              <tbody>
                @for ($i = 1; $i <= 12; $i++) 
                <tr>
                  <td class="text-center">{{$this->vyear}}</td>
                  <td class="text-center">{{$i}}</td>
                  @if(${"data_bulan_" . $i})
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2"
                                  wire:click="generateDocBulan({{$i}})">Re-Generate</button>
                          </div>
                          <div>
                              <div>
                                  <a
                                      href="{{url('reports/'.${"data_bulan_" . $i}->link_download)}}">{{${"data_bulan_" . $i}->link_download}}</a>
                              </div>
                              <div>
                                  <small>Generate date: {{${"data_bulan_" . $i}->generate_at}}</small>
                              </div>
                          </div>
                      </div>
                  </td>
                  @if(${"data_bulan_" . $i}->link_upload)
                  <td>
                      <div class="d-flex">
                          <div>
                              <button type="button" class="btn btn-warning btn-sm me-2" data-bs-toggle="modal"
                                  data-bs-target="#bulanUploadModal" wire:click="openSaveBulanUpload({{$i}})">Re-Upload</button>
                          </div>
                          <div>
                              <div>
                                  <a href="{{url('uploads/'.${"data_bulan_" . $i}->link_upload)}}">{{${"data_bulan_" . $i}->link_upload}}</a>
                              </div>
                              <div>
                                  <small>Upload date: {{${"data_bulan_" . $i}->upload_at}}</small>
                              </div>
                          </div>
              
                      </div>
                  </td>
                  @else
                  <td>
                      <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                          data-bs-target="#bulanUploadModal" wire:click="openSaveBulanUpload({{$i}})">Upload</button>
                  </td>
                  @endif
                  <td>
                      <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#hapusBulanModal"
                          wire:click="openHapusBulan({{$i}})">Hapus</button>
                  </td>
                  @else
                  <td colspan="4"><button type="button" class="btn btn-primary btn-sm"
                          wire:click="generateDocBulan({{$i}})">Generate</button></td>
                  @endif
              </tr>
              @endfor
              </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>
  window.addEventListener('close-modal', event => {
    $('#tahunModal').modal('hide');
    $('#tahunUploadModal').modal('hide');
    $('#hapusTahunModal').modal('hide');

    $('#semesterModal').modal('hide');
    $('#semesterUploadModal').modal('hide');
    $('#hapusSemesterModal').modal('hide');

    $('#triwulanModal').modal('hide');
    $('#triwulanUploadModal').modal('hide');
    $('#hapusTriwulanModal').modal('hide');

    $('#bulanModal').modal('hide');
    $('#bulanUploadModal').modal('hide');
    $('#hapusBulanModal').modal('hide');
  });

  window.addEventListener('open-modal-tahun', event => {
    $('#tahunModal').modal('show');
  });

  window.addEventListener('open-modal-semester', event => {
    $('#semesterModal').modal('show');
  });

  window.addEventListener('open-modal-triwulan', event => {
    $('#triwulanModal').modal('show');
  });
  window.addEventListener('open-modal-bulan', event => {
    $('#bulanModal').modal('show');
  });

  window.addEventListener('swalDataNotFound',event=>{
      swal.fire({
        icon: 'error',
        title: "Data Kosong",
        text: 'Silakan Resync Data Terlebih Dahulu'
      })
    });

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

    $('#select3').select2();
    $('#select3').on('change', function (e) {
        let data = $('#select3').select2("val");
    @this.set('vsatker', data);
    });
  });
</script>
@endpush