@extends('layout.assessor')
@section('content')
<main id="main" class="main">

  <div class="pagetitle">
    <h1>Data Calon Mahasiswa</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/assessor/dashboard">Home</a></li>
        <li class="breadcrumb-item active"><a href="/list-name-table">Ajuan Form</a></li>
        <li class="breadcrumb-item active"><a href="#">Data Calon Mahasiswa</a></li>
      </ol>
    </nav>
  </div><!-- End Page Title -->
  
  {{-- Menampilkan pesan dari controller --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if (session('dinilai'))
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            {{ session('dinilai') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if (session('warning'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {{ session('warning') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

      {{-- PESAN JIKA PENILAIAN SUDAH TERKUNCI --}}
      @if($isFormDisabled)
          <div class="alert alert-info" role="alert">
              <h4 class="alert-heading"><i class="bi bi-lock-fill"></i> Penilaian Terkunci</h4>
              @if ($isAssessmentLocked)
                  <p>Proses penilaian untuk mahasiswa ini telah dikunci oleh admin karena sudah memasuki tahap selanjutnya (Status: <strong>{{ ucfirst(str_replace('_', ' ', $camaba->assessment->rpl_status)) }}</strong>). Anda tidak dapat mengubah penilaian lagi.</p>
              @elseif ($isSubmitted)
                  <p>Anda telah melakukan submit penilaian akhir untuk mahasiswa ini. Semua form penilaian di bawah ini telah dinonaktifkan.</p>
              @endif
          </div>
        @endif
      
      <div class="d-flex justify-content-end">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-file-word me-1"></i> Export
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href=""><i class="bi bi-file-word me-1"></i> Export Word F02</a></li>
                <li><a class="dropdown-item" href=""><i class="bi bi-file-pdf me-1"></i> Export PDF V2</a></li>
                <li><a class="dropdown-item" href=""><i class="bi bi-file-pdf me-1"></i> Export PDF</a></li>
                <li><a class="dropdown-item" href=""><i class="bi bi-file-word me-1"></i> Export Word F08</a></li>
                <li><a class="dropdown-item" href=""><i class="bi bi-file-pdf me-1"></i> Export PDF F08</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="{{ route('export.bukti.assessor', $camaba->id) }}" onclick="showLoadingBtn(this)"><i class="bi bi-file-zip me-1"></i> Export Semua Bukti (ZIP)</a></li>
            </ul>
        </div>
      </div>
  
  <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-pills justify-content-center gap-2 mb-4 flex-wrap">
                <li class="nav-item">
                    <button class="nav-link active btn btn-primary btn-sm" onclick="showTab('profil')">
                        <i class="fas fa-user-circle me-1"></i> Profil
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link btn btn-outline-primary btn-sm" onclick="showTab('ijazah')">
                        <i class="fas fa-graduation-cap me-1"></i> Ijazah
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link btn btn-outline-primary btn-sm" onclick="showTab('penilaian-matkul')">
                        <i class="fas fa-book me-1"></i> Matkul Konversi
                    </button>
                </li>
            </ul>
        </div>
    </div>
  </div>

  <!-- PROFIL -->
  <div class="tab-content active" id="profil">
    <h2>Data Diri Mahasiswa</h2>
    <div class="card">
      <div class="ijazah-overview-assessor mx-4 my-3">
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Nama</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->nama ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Prodi</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->jurusan->nama_jurusan ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Alamat</div>
          <div class="col-lg-9 col-md-8">{{   $camaba->alamat ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Email</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->user->email ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">No Wa</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->nomor_telepon ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Tempat Lahir</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->tempat_lahir ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Tanggal Lahir</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->tanggal_lahir ? \Carbon\Carbon::parse($camaba->tanggal_lahir)->format('d/m/Y') : '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Jenis Kelamin</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->kelamin ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Kota</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->kota ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Provinsi</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->provinsi ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Kode Pos</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->kode_pos ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Kebangsaan</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->kebangsaan ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Nomor Rumah</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->nomor_rumah ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Nomor Kantor</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->nomor_kantor ?? '-'  }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- IJAZAH -->
  <div class="tab-content" id="ijazah">
    <h2>Data Ijazah</h2>
    <div class="card">
      <div class="ijazah-overview-assessor mx-4 my-3">
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Institusi Pendidikan</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->institusi_pendidikan ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Jenjang</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->jenjang ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Provinsi</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->provinsi ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Kota</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->kota ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Negara</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->negara ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Fakultas</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->fakultas ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Jurusan</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->jurusan ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Nilai/IPK</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->ipk_nilai ?? '-'  }}</div>
        </div>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4 label">Tahun Lulus</div>
          <div class="col-lg-9 col-md-8">{{  $camaba->ijazah->tahun_lulus ?? '-'  }}</div>
        </div>
        <div class="row mb-2">
          <div class="col-lg-3 col-md-4 label">Bukti File</div>
          <div class="col-lg-9 col-md-8">
            @if($camaba->ijazah && $camaba->ijazah->file)
              <a href="{{ asset('Data/Ijazah/' .$camaba->ijazah->file) }}" target="_blank" class="btn btn-primary btn-sm">
                 Lihat Ijazah
              </a>
            @else
              <span class="text-muted">File tidak tersedia</span>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>

  

  <!-- PENILAIAN MATKUL -->
  <div class="tab-content" id="penilaian-matkul">
    <h2>Penilaian Self-Assessment Mata Kuliah</h2>
    <div class="card">
        <div class="card-body">
            <h4 class="card-title mt-3">Mata Kuliah yang akan dikonversi</h4>
            <ol class="list-group list-group-numbered">
                @forelse ($matkul as $mk)
                  <li class="list-group-item d-flex justify-content-between align-items-start">
                      <div class="ms-2 me-auto">
                          <div class="fw-bold">{{ $mk->nama_matkul ?? '-' }}</div>
                          @if(!empty($mk->keterangan_penilaian))
                              <div class="mt-2 p-2 bg-light border rounded">
                                  <small class="text-muted fw-bold">
                                      <i class="bi bi-chat-left-text"></i> Catatan Assessor:
                                  </small>
                                  <div class="mt-1">
                                      {{ $mk->keterangan_penilaian }}
                                  </div>
                              </div>
                          @endif
                          <span class="badge {{ $mk->status == 'Lolos' ? 'bg-success' : ($mk->status ? 'bg-danger' : 'bg-secondary') }}">
                              {{ $mk->status ?? 'Belum dinilai' }}
                          </span>
                      </div>
                      <span class="bg-light {{ $mk->nilai ? 'text-success' : 'text-secondary' }} border {{ $mk->nilai ? 'border-success' : 'border-secondary' }} rounded p-2 mr-3">
                          {{ $mk->nilai ?? 'Belum ada nilai' }}
                      </span>
                      <button type="button" class="btn btn-primary" 
                              onclick="window.location.href='{{ route('form-user', ['matkul_id' => $mk->matkul_id,'calon_mahasiswa_id' => $camaba->id]) }}'"
                              {{ $isFormDisabled  ? 'disabled' : '' }}>
                          Form Penilaian
                      </button>
                  </li>
                @empty
                  <li class="list-group-item">
                      Tidak ada mata kuliah yang akan dikonversi.
                  </li>
                @endforelse
            </ol>
        </div>
        
    </div>
  </div>
  
  {{-- [CARD BARU] untuk Submit Penilaian Akhir --}}
  <div class="card">
      <div class="card-body text-center my-3">
          <h5 class="card-title">Submit Penilaian Akhir</h5>
          @if ($isAssessmentLocked)
              <p class="text-muted">Proses penilaian telah dikunci oleh admin.</p>
              <button class="btn btn-secondary" disabled>
                  <i class="bi bi-lock-fill"></i> Penilaian Telah Dikunci
              </button>
              <p class="text-muted mt-2">Status saat ini: <strong>{{ ucfirst(str_replace('_', ' ', $camaba->assessment->rpl_status)) }}</strong></p>

          @elseif ($isSubmitted)
              <p class="text-muted">Anda telah mengirimkan penilaian akhir untuk mahasiswa ini.</p>
              <button class="btn btn-success" disabled>
                  <i class="bi bi-check-circle-fill"></i> Anda Sudah Submit
              </button>
          
          @else
              <p>Klik tombol di bawah ini jika Anda telah selesai melakukan seluruh penilaian. Tindakan ini akan memeriksa kelengkapan data.</p>
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmSubmitModal">
                  <i class="bi bi-send-check-fill"></i> Submit Seluruh Penilaian
              </button>
          @endif
      </div>
  </div>

  </main><!-- End #main -->
  
  <div class="modal fade" id="confirmSubmitModal" tabindex="-1" aria-labelledby="confirmSubmitModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="confirmSubmitModalLabel">Konfirmasi Submit Penilaian Akhir</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Apakah Anda yakin ingin submit penilaian akhir? Sistem akan memeriksa apakah semua mata kuliah yang diajukan sudah Anda nilai.</p>
            <p>Proses ini tidak dapat dibatalkan setelah disubmit.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
            {{-- Form ini hanya akan di-submit ketika tombol 'Ya, Submit' di-klik --}}
            <form action="{{ route('submit-final-assessment', ['camaba_id' => $camaba->id]) }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-primary">Ya, Submit Penilaian</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  
  <div class="modal fade" id="unassessedWarningModal" tabindex="-1" aria-labelledby="unassessedWarningModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="unassessedWarningModalLabel"><i class="bi bi-exclamation-triangle-fill text-warning"></i> Peringatan</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Sistem mendeteksi ada beberapa mata kuliah yang belum Anda beri nilai:</p>
        <ul class="list-group">
            @if(session('unassessed_matkuls'))
                @foreach(session('unassessed_matkuls') as $unassessed)
                    <li class="list-group-item">{{ $unassessed }}</li>
                @endforeach
            @endif
        </ul>
        <p class="mt-3">Apakah Anda yakin ingin tetap melanjutkan submit penilaian akhir?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal, Saya Akan Melengkapi</button>
        <form id="forceSubmitForm" action="{{ route('submit-final-assessment', ['camaba_id' => $camaba->id]) }}" method="POST">
            @csrf
            {{-- Input tersembunyi untuk menandakan submit paksa --}}
            <input type="hidden" name="force_submit" value="1"> 
            <button type="submit" class="btn btn-warning">Ya, Tetap Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

  
  <style>
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    background-color: #0d6efd;
    color: white !important;
    font-weight: bold;
    transition: all 0.3s ease;
  }

  .nav-pills .nav-link:hover {
    background-color: #1987fb;
    color: white !important;
  }

  .tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
  }

  .tab-content.active {
    display: block;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
<script>
  function showTab(tabName) {
    // Logika untuk menampilkan/menyembunyikan konten tab
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active');
    });

    document.getElementById(tabName).classList.add('active');

    // Update kelas aktif pada tombol tab
    document.querySelectorAll('.nav-link').forEach(btn => {
      btn.classList.remove('active');
    });

    event.currentTarget.classList.add('active');
  }

  // Script untuk CPMK Modal
  document.addEventListener('DOMContentLoaded', function() {
    // Inisialisasi modal Bootstrap
    var cpmkModal = new bootstrap.Modal(document.getElementById('cpmkModal'));
    var matkulNameInModal = document.getElementById('matkulNameInModal');
    var cpmkTableBody = document.getElementById('cpmkTableBody');

    // Event listener untuk tombol View CPMK
    document.querySelectorAll('.view-cpmk-btn').forEach(button => {
      button.addEventListener('click', function() {
        const matkulId = this.getAttribute('data-matkul-id');
        const matkulName = this.getAttribute('data-matkul-name');

        matkulNameInModal.textContent = matkulName;
        cpmkTableBody.innerHTML = ''; // Clear previous table rows

        // Show loading message
        const loadingRow = document.createElement('tr');
        const loadingCell = document.createElement('td');
        loadingCell.setAttribute('colspan', '2');
        loadingCell.textContent = 'Loading CPMK...';
        loadingCell.style.textAlign = 'center';
        loadingRow.appendChild(loadingCell);
        cpmkTableBody.appendChild(loadingRow);
        
        // Cek jika session 'show_warning_modal' ada, lalu tampilkan modal
        @if(session('show_warning_modal'))
            var unassessedModal = new bootstrap.Modal(document.getElementById('unassessedWarningModal'));
            unassessedModal.show();
        @endif

        // Fetch CPMK data
        fetch(`/assessor/matkul/${matkulId}/cpmk`)
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.json();
          })
          .then(data => {
            cpmkTableBody.innerHTML = ''; // Clear loading message
            if (data.length > 0) {
              data.forEach((cpmk, index) => {
                const row = document.createElement('tr');
                const noCell = document.createElement('td');
                const cpmkCell = document.createElement('td');

                noCell.textContent = index + 1;
                cpmkCell.textContent = cpmk.penjelasan;

                row.appendChild(noCell);
                row.appendChild(cpmkCell);
                cpmkTableBody.appendChild(row);
              });
            } else {
              const noCpmkRow = document.createElement('tr');
              const noCpmkCell = document.createElement('td');
              noCpmkCell.setAttribute('colspan', '2');
              noCpmkCell.textContent = 'Tidak ada CPMK untuk mata kuliah ini.';
              noCpmkCell.style.textAlign = 'center';
              noCpmkRow.appendChild(noCpmkCell);
              cpmkTableBody.appendChild(noCpmkRow);
            }
          })
          .catch(error => {
            console.error('Error fetching CPMK:', error);
            cpmkTableBody.innerHTML = ''; // Clear loading message
            const errorRow = document.createElement('tr');
            const errorCell = document.createElement('td');
            errorCell.setAttribute('colspan', '2');
            errorCell.textContent = 'Error loading CPMK.';
            errorCell.style.textAlign = 'center';
            errorRow.appendChild(errorCell);
            cpmkTableBody.appendChild(errorRow);
          });

        cpmkModal.show();
      });
    });
  });

  function validateForm() {
      const assessments = document.querySelectorAll('input[type="radio"]:checked');
      if (assessments.length === 0) {
          alert('Silakan pilih minimal satu penilaian untuk setiap mata kuliah yang akan dinilai.');
          return false;
      }
      return true;
  }
</script>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Cek jika session 'show_warning_modal' ada, lalu tampilkan modal
    @if(session('show_warning_modal'))
        var unassessedModal = new bootstrap.Modal(document.getElementById('unassessedWarningModal'));
        unassessedModal.show();
    @endif
});

function showLoadingBtn(btn) {
    // Save original content
    var originalContent = btn.innerHTML;
    
    // Set loading state
    btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Memproses...';
    btn.classList.add('disabled');
    btn.style.pointerEvents = 'none';

    // Since it's a file download via href, the browser will stay on the same page.
    setTimeout(function() {
      btn.innerHTML = originalContent;
      btn.classList.remove('disabled');
      btn.style.pointerEvents = 'auto';
    }, 4000);
}
</script>
@endpush