@push('styles')
  <style>
    .document-column {
    padding: 10px;
    background-color: #f7f9fc;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    }

    .document-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .document-links .document-entry {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .document-links a {
    text-decoration: none;
    color: #007bff;
    font-weight: 500;

    }

    .document-links a:hover {
    text-decoration: underline;
    }

    .document-links i {
    margin-right: 5px;

    }

    .document-links {
    background: #E9F0FF;
    }

    .document-entry .fa-trash-alt {
    cursor: pointer;
    }
  </style>
@endpush
<div>
  <p class="mb-4"></p>
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <div class="row">
        <div class="col-sm-6 text-left">
          <a href="{{ route('penilaian') }}" type="button" class="btn btn-primary"><i
              class="fas fa-arrow-circle-left"></i> Kembali</a>
          <a href="{{ route('exportExcelLKE', ['id' => $penilaianMandiriId]) }}" type="button" class="btn btn-info">LKE
            <i class="far fa-file-excel"></i></a>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered table-hover no-footer" id="no-footer">
          <thead style="background-color: #435ebe; color: white;">
            <tr>
              <th colspan="10" class="border-0 pt-4 pb-4">
                <h4 class="h4 mb-0 text-white text-center fw-bold" style="line-height: 1.6;">
                  LEMBAR KERJA PENILAIAN MANDIRI AKUNTABILITAS KINERJA<br>
                  <span class="text-warning">{{ strtoupper($this->penilaian->satkers->nama ?? '') }}</span><br>
                  TAHUN {{ $this->penilaian->tahun_pelaksanaan }}
                </h4>
              </th>
            </tr>
            <tr class="text-center align-middle" style="background-color: #3b53a8;">
              <th class="border-0 text-white" rowspan="2" colspan="3">No</th>
              <th class="border-0 text-white" rowspan="2">Komponen</th>
              <th class="border-0 text-white" rowspan="2">Bobot</th>
              <th class="border-0 text-white border-bottom" colspan="2">Unit/Satker</th>
              <th class="border-0 text-white" rowspan="2">Catatan</th>
              <th class="border-0 text-white" rowspan="2">Dokumen</th>
            </tr>
            <tr class="text-center align-middle" style="background-color: #3b53a8;">
              <th class="border-0 text-white">Jawaban</th>
              <th class="border-0 text-white">Nilai</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($penilaian->penilaianKomponen as $komponenIndex => $komponen)
        <tr style="background-color: #e8f0fe;" wire:key="$komponen->id">
          <td class="text-center fw-bold text-primary">{{ $komponenIndex + 1 }}</td>
          <td></td>
          <td></td>
          <td class='text-justify fw-bold text-primary' style="font-size: 1.05rem;">{{ $komponen->komponen->nama_komponen }}</td>
          <td class='text-center fw-bold text-primary'>{{ $komponen->komponen->bobot }}</td>
          <td></td>
          <td class='text-center fw-bold text-primary fs-5'>{{ $komponen->nilai ?? '0' }}</td>
          <td colspan='2'></td>
        </tr>
        @foreach ($komponen->komponen->SubKomponen as $subIndex => $subKomponen)
      <tr class='bg-white border-bottom' wire:key="{{ $komponen->komponen->id . '-' . $subKomponen->id }}">
        <td></td>
        <td class='text-center fw-bold text-secondary'>{{ chr(96 + $loop->iteration) }}</td>
        <td></td>
        <td class='text-justify fw-bold'>{{ $subKomponen->nama }}</td>
        <td class='text-center align-middle'>{{ $subKomponen->bobot}}</td>
        <td class='text-center align-middle'>
        <label for="subKomponen{{ $subKomponen->id }}" class="w-100 mb-0">
        <select class='form-select form-select-sm border-primary text-primary fw-bold text-center' wire:model.change="selectedValues.{{ $subKomponen->id }}"
        id="subKomponen{{ $subKomponen->id }}" style="min-width: 80px;">
        @php
            $detail = $detailSubKomponen->firstWhere('subKomponen_id', $subKomponen->id);
        @endphp
        @if ($detail)
            @if($detail->nilai != null)
            <option value="">{{ \App\Enums\NilaiTotal::fromValue($detail->jawaban)->name }}</option>
            @else
            <option value="">--Pilih--</option>
            @endif
            @foreach (\App\Enums\NilaiJawaban::values() as $key => $value)
            <option value="{{ $key }}"> {{ $value }} </option>
            @endforeach
        @endif
        </select>
        </label>
        </td>
        <td class='text-center align-middle fw-bold text-success fs-5'>
        @php
            $detail = $detailSubKomponen->firstWhere('subKomponen_id', $subKomponen->id);
        @endphp
        {{ $detail->nilai ?? "0" }}
        </td>
        <td colspan='2'></td>
      </tr>
      <tr style="background-color: #fafafa;">
        <td colspan='9' class="text-center text-muted py-1" style="font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;">Kriteria Penilaian</td>
      </tr>
      @foreach ($subKomponen->kriteria as $kriteriaIndex => $kriteria)
      <tr wire:key="$k->id" class="bg-white align-middle border-bottom">
      <td></td>
      <td></td>
      <td class='text-center text-muted'>{{ $loop->iteration }}</td>
      <td colspan='4' class='text-justify text-break px-4 text-secondary' style="font-size: 0.95rem;">{{ $kriteria->nama }}
      @php
          $detailK = $detailKriteria->firstWhere('kriteria_id', $kriteria->id);
      @endphp
      @if ($detailK)
        @if($detailK->catatan_2 != null)
        <div class="mt-2 p-2 bg-light-warning rounded border-start border-warning border-3">
            <strong class='text-warning'><i class='fas fa-exclamation-triangle'></i> Catatan Evaluator:</strong><br>
            <span class="text-dark">{{ $detailK->catatan_2 }}</span>
        </div>
        @endif
        @if($detailK->rekomendasi != null)
        <div class="mt-2 p-2 bg-light-info rounded border-start border-info border-3">
            <strong class='text-info'><i class='fas fa-info-circle'></i> Rekomendasi:</strong><br>
            <span class="text-dark">{{ $detailK->rekomendasi }}</span>
        </div>
        @endif
      @endif


      </td>
      <td class="text-break p-3" title='Klik dua kali untuk mengisi catatan' id="description({{ $kriteria->id }})"
      wire:dblclick="openModal({{ $kriteria->id }})" wire:mouseenter="stopEditing" style="cursor: pointer; background-color: #fdfdfd; border-left: 1px dashed #dee2e6; border-right: 1px dashed #dee2e6;">
      @if ($detailK && $detailK->catatan_1)
        <div class="text-secondary" style="font-size: 0.9rem;">
            <i class="fas fa-comment-dots text-primary me-2"></i>{{ $detailK->catatan_1 }}
        </div>
      @else
        <div class="text-muted text-center" style="font-size: 0.85rem; opacity: 0.6;">
            <i class="fas fa-edit d-block mb-1 fs-5"></i> Klik 2x untuk catatan
        </div>
      @endif

      </td>
      <td id="file({{ $kriteria->id }})" class="text-center align-middle p-2">
        @if ($detailK && $detailK->link_doc_1 != null)
            <div class="d-flex flex-column align-items-center gap-2">
                <a href="{{ $detailK->link_doc_1 }}" target="_blank" class="btn btn-sm btn-outline-primary rounded-pill w-100 text-truncate" style="max-width: 130px;" title="{{ $detailK->nama_doc }}">
                    <i class="fas fa-file-alt me-1"></i> {{ $detailK->nama_doc }}
                </a>
                <button wire:click.prevent="deleteConfirmation({{ $kriteria->id }})" class="btn btn-sm btn-light text-danger rounded-pill w-100" style="max-width: 130px;">
                    <i class="fas fa-trash-alt me-1"></i> Hapus
                </button>
            </div>
        @else
            <button wire:click="$dispatch('upload', { id: {{ $kriteria->id }} })" data-bs-toggle="modal" data-bs-target="#formUpload" class="btn btn-sm btn-outline-secondary rounded-pill">
                <i class="fas fa-cloud-upload-alt me-1"></i> Upload File
            </button>
        @endif
      </td>


      </tr>
    @endforeach
    @endforeach
      @endforeach
            {{-- new kriteria --}}

          </tbody>
          <tfoot>
            <tr>
              <td colspan="8" class="text-center font-weight-bold">Total</td>
              <td class="text-center">{{$totalNilaiAll1}}</td>
            </tr>
            <tr>
              <td colspan="8" class="text-center font-weight-bold">Nilai</td>
              <td class="text-center font-weight-bold">
                <h4 style="color: {{ $color }}">{{$nilaiEnumAll}}</h4>
                <i class="{{ $emoticon }}"></i>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="card-footer text-center">
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#aggreement"> Kirim <i
          class="fas fa-paper-plane"></i></button>
    </div>
  </div>
  @include('livewire.modal-upload')
  <div wire:ignore.self class="modal fade" id="aggreement" tabindex="1" role="dialog" data-keyboard="false"
    data-backdrop="static" aria-labelledby="aggreement" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Pernyataan</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <p>Dengan sadar kami menyatakan :</p>
          <ul style="margin-left:15px;">
            <li class="text-justify">Dengan sesungguhnya bahwa dokumen, data, informasi, dan/atau keterangan yang saya
              sampaikan, berikan, kirimkan, dan/atau isikan telah direviu oleh Tim Reviu internal dan sah, dan/atau
              sesuai dengan keadaan dan/atau kenyataan.</li>
            <li class="text-justify">Bersedia melakukan perbaikan data apabila dokumen, data, informasi, dan/atau
              keterangan tersebut tidak sesuai.</li>
          </ul>
          <div class="form-group mt-3">
            <form wire:submit.prevent="store()">
              @csrf
              <div class="form-check">
                <input wire:model="checkbox1" type="checkbox" id="checkbox1" class='form-check-input' required>
                <label for="checkbox1">Setuju</label>
                <div>
                  @error('checkbox1')
            <span class="text-danger">{{ $message }}</span>
          @enderror
                </div>
              </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal"><i class="fa-circle-chevron-left"></i>
            Kembali</button>
          <button type="submit" class="btn btn-primary btn-send">Simpan <i
              class="fa-regular fa-floppy-disk"></i></button>
        </div>
        </form>
      </div>
    </div>
  </div>
  <!-- Footer -->
  <!-- End of Footer -->
  <!-- End of Content Wrapper -->

  <!-- End of Page Wrapper -->

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>
  <!-- Bootstrap core JavaScript-->

  <!-- <script src="https://bawasmari.mahkamahagung.go.id/seMAr/assets/js/table.js"></script> -->

  <!-- Page level plugins -->


  <div wire:ignore.self class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Catatan</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Your modal content goes here -->

          <textarea class="form-control" wire:model="catatan_1" name="catatan_1" id="" cols="10"
            rows="10">{{ $this->catatan_1 ?? "" }}</textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" wire:click="saveCatatan">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>
@push('scripts')


  <script>

    window.addEventListener('swalSuccess', event => {
    swal.fire({
      title: 'Success !',
      text: 'Berhasil menyimpan Data',
      icon: 'success',
      timer: '3000'
    })

    setTimeout(function () {
      window.location.reload();
    }, 1000);
    })
  </script>
  <script>
    window.addEventListener('showDeleteConfirmation', event => {
    Swal.fire({
      title: "Are you sure?",
      text: "Anda akan menghapus ini!",
      showCancelButton: true,
      icon: "warning",
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, delete it!"
    }).then((result) => {
      if (result.isConfirmed) {
      @this.dispatch('deleteConfirmed');
      Swal.fire({
        title: "Deleted!",
        text: "Your file has been deleted.",
        icon: "success"
      });
      }
    });
    })

    window.addEventListener('showSubMitConfirmation', event => {
    Swal.fire({
      title: "Pernyataan",
      text: "Dengan sesungguhnya bahwa dokumen, data, informasi, dan/atau keterangan yang saya sampaikan, berikan, kirimkan, dan/atau isikan telah direviu oleh Tim Reviu internal dan sah, dan/atau sesuai dengan keadaan dan/atau kenyataan. Bersedia melakukan perbaikan data apabila dokumen, data, informasi, dan/atau keterangan tersebut tidak sesuai",
      showCancelButton: true,
      icon: "warning",
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, delete it!"
    }).then((result) => {
      if (result.isConfirmed) {
      @this.dispatch('deleteConfirmed');
      Swal.fire({
        title: "Deleted!",
        text: "Your file has been deleted.",
        icon: "success"
      });
      }
    });
    })
  </script>
  <script>
    window.addEventListener('openModal', event => {
    $("#myModal").modal('show');
    })
  </script>



@endpush