@extends('layout.super_admin')
@section('content')

  <main id="main" class="main">

    <div class="pagetitle">
      <h1>Penugasan Assessor</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/super/dashboard">Home</a></li>
          <li class="breadcrumb-item active">Atur Assessor</li>
        </ol>
      </nav>
    </div>

    <section class="section">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-body pt-3">
              <h5 class="card-title text-center mb-4">Atur Penugasan Assessor</h5>

              <!-- Filter jurusan & jenis mahasiswa khusus super admin -->
              <form class="row g-3 justify-content-center mb-4" action="{{ route('super.kelola-assessor-mahasiswa') }}" method="GET">
                <div class="col-md-5">
                  <label for="jurusan" class="form-label font-weight-bold text-dark small">PILIH PROGRAM STUDI / JURUSAN</label>
                  <select name="jurusan_id" id="jurusan" class="form-select form-select-sm shadow-sm rounded-pill px-3" required onchange="this.form.submit()">
                    <option value="">Semua Jurusan</option>
                    @foreach($jurusans as $jurusan)
                      <option value="{{ $jurusan->id }}" {{ $jurusan_id == $jurusan->id ? 'selected' : '' }}>{{ $jurusan->nama_jurusan }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="col-md-5">
                  <label for="jenis_mahasiswa" class="form-label font-weight-bold text-dark small">FILTER JENIS MAHASISWA</label>
                  <select name="jenis_mahasiswa" id="jenis_mahasiswa" class="form-select form-select-sm shadow-sm rounded-pill px-3" onchange="this.form.submit()">
                    <option value="">Semua Jenis</option>
                    <option value="camaba_alihjenjang" {{ ($jenis_mahasiswa ?? '') == 'camaba_alihjenjang' ? 'selected' : '' }}>Alih Jenjang</option>
                    <option value="camaba_eporto" {{ ($jenis_mahasiswa ?? '') == 'camaba_eporto' ? 'selected' : '' }}>Portofolio/E-Porto</option>
                  </select>
                </div>
              </form>

              @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
              @endif

              @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
              @endif

              <style>
                  .transition-hover {
                      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                  }
                  .transition-hover:hover {
                      transform: translateY(-3px);
                      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
                      border-left: 4px solid #6366f1 !important;
                  }
                  .custom-card-row {
                      border: 1px solid rgba(0,0,0,0.06) !important;
                      border-left: 4px solid transparent !important;
                      border-radius: 16px;
                  }
                  .avatar-badge {
                      width: 44px;
                      height: 44px;
                      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
                      color: white;
                      border-radius: 12px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: 700;
                      font-size: 15px;
                      box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
                  }
                  .btn-pill {
                      border-radius: 50px;
                      font-weight: 600;
                      font-size: 12px;
                      padding: 8px 20px;
                  }
                  .font-weight-600 {
                      font-weight: 600;
                  }
                  .font-weight-500 {
                      font-weight: 500;
                  }
                  .status-dot {
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      display: inline-block;
                      margin-right: 6px;
                  }
                  .status-dot.success { background-color: #10b981; }
                  .status-dot.warning { background-color: #f59e0b; }
                  .status-dot.danger { background-color: #ef4444; }
                  .status-dot.info { background-color: #3b82f6; }
                  .status-dot.secondary { background-color: #6b7280; }
                  .status-badge {
                      display: inline-flex;
                      align-items: center;
                      padding: 4px 12px;
                      border-radius: 50px;
                      font-size: 12px;
                      font-weight: 500;
                      background-color: #f3f4f6;
                  }
                  .form-label-premium {
                      font-weight: 600;
                      font-size: 12px;
                      color: #344054;
                      margin-bottom: 6px;
                      display: block;
                      text-transform: uppercase;
                      letter-spacing: 0.5px;
                  }
                  .form-control-premium {
                      border: 1px solid #d0d5dd;
                      border-radius: 10px;
                      padding: 10px 16px;
                      font-size: 14px;
                      color: #1d2939;
                      background-color: #ffffff;
                      transition: border-color 0.2s, box-shadow 0.2s;
                  }
                  .form-control-premium:focus {
                      outline: none;
                      border-color: #6366f1;
                      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
                  }
                  .form-select-premium {
                      border: 1px solid #d0d5dd;
                      border-radius: 10px;
                      padding: 10px 16px;
                      font-size: 14px;
                      color: #1d2939;
                      background-color: #ffffff;
                      transition: border-color 0.2s, box-shadow 0.2s;
                  }
                  .form-select-premium:focus {
                      outline: none;
                      border-color: #6366f1;
                      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
                  }
                  .searchable-select-wrapper {
                      position: relative;
                  }
                  .searchable-select-wrapper select.form-select-premium {
                      display: none;
                  }
                  .searchable-select-toggle {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      cursor: pointer;
                      user-select: none;
                  }
                  .searchable-select-toggle .placeholder-text {
                      color: #98a2b3;
                  }
                  .searchable-select-toggle i {
                      color: #98a2b3;
                      transition: transform 0.2s ease;
                  }
                  .searchable-select-wrapper.open .searchable-select-toggle i {
                      transform: rotate(180deg);
                  }
                  .searchable-select-panel {
                      display: none;
                      position: absolute;
                      top: calc(100% + 4px);
                      left: 0;
                      right: 0;
                      z-index: 1060;
                      background: #fff;
                      border: 1px solid #d0d5dd;
                      border-radius: 10px;
                      box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
                      overflow: hidden;
                  }
                  .searchable-select-wrapper.open .searchable-select-panel {
                      display: block;
                  }
                  .searchable-select-search {
                      border: none;
                      border-bottom: 1px solid #eaecf0;
                      padding: 10px 14px;
                      width: 100%;
                      font-size: 14px;
                      outline: none;
                  }
                  .searchable-select-options {
                      max-height: 220px;
                      overflow-y: auto;
                  }
                  .searchable-select-option {
                      padding: 9px 14px;
                      font-size: 14px;
                      cursor: pointer;
                      color: #1d2939;
                  }
                  .searchable-select-option:hover,
                  .searchable-select-option.active {
                      background-color: #eef2ff;
                  }
                  .searchable-select-option.selected {
                      font-weight: 600;
                      color: #4338ca;
                  }
                  .searchable-select-empty {
                      padding: 10px 14px;
                      font-size: 13px;
                      color: #98a2b3;
                      text-align: center;
                  }
                  .stepper-wrapper {
                      width: 100%;
                      position: relative;
                      padding: 20px 0;
                  }
                  .stepper-item {
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      flex: 1;
                      min-width: 80px;
                      position: relative;
                      z-index: 2;
                  }
                  .stepper-circle {
                      width: 40px;
                      height: 40px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-weight: bold;
                      font-size: 16px;
                      margin-bottom: 8px;
                      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                      border: 2px solid #cbd5e1;
                      color: #64748b;
                  }
                  .stepper-item.active .stepper-circle {
                      background: #6366f1;
                      color: #ffffff;
                      border-color: #4f46e5;
                      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
                  }
                  .stepper-item.completed .stepper-circle {
                      background: #10b981;
                      color: #ffffff;
                      border-color: #059669;
                      box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
                  }
                  .stepper-label {
                      font-size: 12px;
                      text-align: center;
                      font-weight: 500;
                      color: #64748b;
                      transition: color 0.3s;
                  }
                  .stepper-item.completed .stepper-label { color: #10b981; font-weight: 600; }
                  .stepper-item.active .stepper-label { color: #6366f1; font-weight: 600; }
                  .stepper-line {
                      flex: 1;
                      height: 3px;
                      background: #e2e8f0;
                      margin-top: -24px;
                      position: relative;
                      top: 20px;
                      z-index: 1;
                  }
                  .stepper-icon {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 100%;
                      height: 100%;
                  }
              </style>

              <ul class="nav nav-pills mb-4" id="filterTabs" role="tablist">
                  <li class="nav-item" role="presentation">
                      <button class="nav-link active" type="button" data-filter="semua">Semua <span class="badge bg-secondary ms-1" data-count="semua">0</span></button>
                  </li>
                  <li class="nav-item" role="presentation">
                      <button class="nav-link" type="button" data-filter="belum-assessor">Belum Ada Assessor <span class="badge bg-secondary ms-1" data-count="belum-assessor">0</span></button>
                  </li>
                  <li class="nav-item" role="presentation">
                      <button class="nav-link" type="button" data-filter="siap-publish">Siap Publish <span class="badge bg-secondary ms-1" data-count="siap-publish">0</span></button>
                  </li>
                  <li class="nav-item" role="presentation">
                      <button class="nav-link" type="button" data-filter="sudah-publish">Sudah Dipublish <span class="badge bg-secondary ms-1" data-count="sudah-publish">0</span></button>
                  </li>
              </ul>

              <div class="text-muted small mb-3" id="filterEmptyState" style="display:none;">
                  Tidak ada mahasiswa pada kategori ini.
              </div>

              <div class="custom-card-list">
                @foreach($calon_mahasiswa as $index => $camaba)
                    @php
                        $hasAssessorAssigned = $camaba->assessment && ($camaba->assessment->assessor_id_1 || $camaba->assessment->assessor_id_2 || $camaba->assessment->assessor_id_3);
                        $isPublished = $camaba->assessment && $camaba->assessment->published_at;

                        $cardCanPublish = false;
                        if ($camaba->assessment) {
                            $cardAssessment = $camaba->assessment;
                            $cardAssessor1Ok = !$cardAssessment->assessor_id_1 || $cardAssessment->assessor_1_submitted_at;
                            $cardAssessor2Ok = !$cardAssessment->assessor_id_2 || $cardAssessment->assessor_2_submitted_at;
                            $cardAssessor3Ok = !$cardAssessment->assessor_id_3 || $cardAssessment->assessor_3_submitted_at;
                            if ($hasAssessorAssigned && $cardAssessor1Ok && $cardAssessor2Ok && $cardAssessor3Ok) {
                                $cardCanPublish = true;
                            }
                        }

                        $cardFilters = ['semua'];
                        if (!$hasAssessorAssigned) {
                            $cardFilters[] = 'belum-assessor';
                        }
                        if ($isPublished) {
                            $cardFilters[] = 'sudah-publish';
                        } elseif ($cardCanPublish) {
                            $cardFilters[] = 'siap-publish';
                        }
                    @endphp
                    <div class="custom-card-row bg-white p-4 mb-4 shadow-sm transition-hover border rounded-3" data-filter-tags="{{ implode(' ', $cardFilters) }}">
                        <div class="row align-items-center">
                            <!-- Avatar, Name & Jurusan -->
                            <div class="col-md-4 d-flex align-items-center mb-3 mb-md-0">
                                <div class="avatar-badge me-3">
                                    {{ strtoupper(substr($camaba->nama ?? 'M', 0, 2)) }}
                                </div>
                                <div>
                                    <h6 class="mb-0 font-weight-bold text-dark">{{ $camaba->nama ?? '-' }}</h6>
                                    <small class="text-muted d-block mt-1">
                                        No. {{ $index + 1 }} | {{ $camaba->jurusan->nama_jurusan ?? '-' }}
                                    </small>
                                    @if($camaba->jenis_mahasiswa)
                                        <span class="badge {{ $camaba->jenis_mahasiswa === 'camaba_eporto' ? 'bg-info' : 'bg-warning' }} text-dark px-2 py-1 rounded-pill mt-1 d-inline-block">
                                            {{ $camaba->jenis_mahasiswa === 'camaba_eporto' ? 'Portofolio/E-Porto' : 'Alih Jenjang' }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                            
                            <!-- RPL Status & Deadline -->
                            <div class="col-md-4 mb-3 mb-md-0">
                                @php
                                    $rplStatus = $camaba->assessment->rpl_status ?? null;
                                    $rplClass = 'secondary';
                                    $rplText = 'Belum Mengajukan';
                                    if ($rplStatus) {
                                        $rplText = ucfirst(str_replace('-', ' ', $rplStatus));
                                        switch ($rplStatus) {
                                            case 'selesai': $rplClass = 'success'; break;
                                            case 'penilaian assessor': $rplClass = 'info'; break;
                                            case 'ditinjau admin': $rplClass = 'warning'; break;
                                            case 'self assessment': $rplClass = 'secondary'; break;
                                            case 'banding': $rplClass = 'danger'; break;
                                        }
                                    }
                                @endphp
                                <div class="mb-2">
                                    <span class="text-muted small d-block">Status RPL:</span>
                                    <div class="status-badge mt-1">
                                        <span class="status-dot {{ $rplClass }}"></span> {{ $rplText }}
                                    </div>
                                </div>

                                @if($camaba->assessment && $camaba->assessment->deadline)
                                    <div>
                                        <span class="text-muted small d-block">Deadline Penilaian:</span>
                                        <span class="text-dark small font-weight-600">
                                            <i class="bi bi-clock me-1"></i> {{ \Carbon\Carbon::parse($camaba->assessment->deadline)->format('d/m/Y H:i') }}
                                        </span>
                                        @php
                                            $deadline = \Carbon\Carbon::parse($camaba->assessment->deadline);
                                            $now = now();
                                            $deadlineStatusClass = 'success';
                                            $deadlineStatusText = 'Aktif';

                                            if ($camaba->assessment->rpl_status == 'selesai') {
                                                $deadlineStatusClass = 'success';
                                                $deadlineStatusText = 'Selesai';
                                            } elseif ($deadline < $now) {
                                                $deadlineStatusClass = 'danger';
                                                $deadlineStatusText = 'Terlambat';
                                            } elseif ($deadline->isBetween($now, $now->copy()->addDays(3))) {
                                                $deadlineStatusClass = 'warning';
                                                $deadlineStatusText = 'Mendekati Deadline';
                                            }
                                        @endphp
                                        <span class="badge bg-{{ $deadlineStatusClass }} ms-1 small">{{ $deadlineStatusText }}</span>
                                    </div>
                                @else
                                    <div>
                                        <span class="text-muted small d-block">Deadline Penilaian:</span>
                                        <span class="text-muted small">Belum diatur</span>
                                    </div>
                                @endif
                            </div>

                            <!-- Actions & Publish -->
                            <div class="col-md-4 text-end d-flex justify-content-md-end justify-content-start align-items-center mt-3 mt-md-0">
                                @php
                                    $can_publish = $cardCanPublish;
                                @endphp

                                @if($can_publish)
                                    @if($camaba->assessment->published_at)
                                        <button class="btn btn-sm btn-pill btn-success me-2" disabled>
                                            <i class="bi bi-check-circle me-1"></i> Telah Dipublish
                                        </button>
                                    @else
                                        <button type="button" class="btn btn-sm btn-pill btn-primary me-2 px-3 animate-pulse" onclick="showRekapNilai({{ $camaba->id }})">
                                            <i class="bi bi-rocket-takeoff me-1"></i> Publish Hasil
                                        </button>
                                    @endif
                                @endif

                                <div class="dropdown">
                                    <button class="btn btn-sm btn-pill btn-outline-secondary dropdown-toggle px-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        Aksi
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow border-0">
                                        <li>
                                            <a class="dropdown-item small py-2" href="#" onclick="editData({{ $camaba->id }}, '{{ $camaba->assessment->assessor_id_1 ?? '' }}', '{{ $camaba->assessment->assessor_id_2 ?? '' }}', '{{ $camaba->assessment->assessor_id_3 ?? '' }}', '{{ $camaba->assessment && $camaba->assessment->deadline ? $camaba->assessment->deadline->format('Y-m-d\TH:i') : '' }}')">
                                                <i class="bi bi-pencil-square text-primary me-2"></i> Atur Assessor
                                            </a>
                                        </li>
                                        @if($camaba->assessment)
                                            <li>
                                                <a class="dropdown-item small py-2" href="#" onclick="showUbahStatusRpl({{ $camaba->id }}, '{{ $camaba->assessment->rpl_status ?? '' }}')">
                                                    <i class="bi bi-diagram-3 text-warning me-2"></i> Ubah Status RPL
                                                </a>
                                            </li>
                                        @endif
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item small py-2" href="{{ route('export-word02', $camaba->id) }}">
                                                <i class="bi bi-file-earmark-word text-success me-2"></i> Export Word F02
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item small py-2" href="{{ route('export-word08', $camaba->id) }}">
                                                <i class="bi bi-file-earmark-word text-success me-2"></i> Export Word F08
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <hr class="my-3 text-muted opacity-25">

                        <!-- Details Grid for Assigned Assessors -->
                        <div class="row pt-1 text-muted small">
                            <div class="col-md-4 border-end">
                                <div class="font-weight-600 text-dark mb-1">Assessor 1</div>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-person me-2"></i> 
                                    <span>{{ $camaba->assessment->assessor1->nama ?? 'Belum ditugaskan' }}</span>
                                    @if($camaba->assessment && $camaba->assessment->assessor_1_submitted_at)
                                        <span class="badge bg-success ms-2 small">Selesai</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-4 border-end ps-md-4 mt-3 mt-md-0">
                                <div class="font-weight-600 text-dark mb-1">Assessor 2</div>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-person me-2"></i> 
                                    <span>{{ $camaba->assessment->assessor2->nama ?? 'Belum ditugaskan' }}</span>
                                    @if($camaba->assessment && $camaba->assessment->assessor_2_submitted_at)
                                        <span class="badge bg-success ms-2 small">Selesai</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-4 ps-md-4 mt-3 mt-md-0">
                                <div class="font-weight-600 text-dark mb-1">Assessor 3</div>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-person me-2"></i> 
                                    <span>{{ $camaba->assessment->assessor3->nama ?? 'Belum ditugaskan' }}</span>
                                    @if($camaba->assessment && $camaba->assessment->assessor_3_submitted_at)
                                        <span class="badge bg-success ms-2 small">Selesai</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
              </div>

            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Modal Edit Penugasan Assessor -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title font-weight-bold" id="editModalLabel"><i class="bi bi-person-gear me-2"></i>Atur Assessor Mahasiswa</h5>
                    <button type="button" class="close btn-close btn-close-white text-white" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close" style="background: none; border: none; font-size: 1.5rem; line-height: 1;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-dark text-start p-4">
                    <form id="editForm" method="POST" action="{{ route('super.kelola-assessor-mahasiswa-add') }}">
                        @csrf
                        <input type="hidden" name="calon_mahasiswa_id" id="calonMahasiswaId">
                        
                        <div class="form-group mb-3">
                            <label for="assessor1_id" class="form-label-premium font-weight-600">Assessor 1 <span class="text-danger">*</span></label>
                            <div class="searchable-select-wrapper">
                                <select class="form-select form-select-premium w-100" id="assessor1_id" name="assessor1_id" required onchange="updateAssessorOptions()">
                                    <option value="">Pilih Assessor 1</option>
                                    @foreach($assessor as $assessor1)
                                        <option value="{{ $assessor1->id }}">{{ $assessor1->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="assessor2_id" class="form-label-premium font-weight-600">Assessor 2</label>
                            <div class="searchable-select-wrapper">
                                <select class="form-select form-select-premium w-100" id="assessor2_id" name="assessor2_id" onchange="updateAssessorOptions()">
                                    <option value="">Pilih Assessor 2</option>
                                    @foreach($assessor as $assessor2)
                                        <option value="{{ $assessor2->id }}">{{ $assessor2->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="assessor3_id" class="form-label-premium font-weight-600">Assessor 3</label>
                            <div class="searchable-select-wrapper">
                                <select class="form-select form-select-premium w-100" id="assessor3_id" name="assessor3_id" onchange="updateAssessorOptions()">
                                    <option value="">Pilih Assessor 3</option>
                                    @foreach($assessor as $assessor3)
                                        <option value="{{ $assessor3->id }}">{{ $assessor3->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group mb-4">
                            <label for="deadline" class="form-label-premium font-weight-600">Deadline Penilaian</label>
                            <input type="datetime-local" name="deadline" id="deadline" class="form-control form-control-premium w-100">
                            <small class="form-text text-muted mt-1 d-block">Pilih tanggal dan waktu deadline untuk penilaian assessor</small>
                        </div>
                        
                        <div class="modal-footer bg-light px-0 pb-0 pt-3 border-0 d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-secondary btn-pill" data-dismiss="modal" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary btn-pill shadow-sm">Simpan Perubahan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Rekap Nilai -->
    <div class="modal fade" id="rekapNilaiModal" tabindex="-1" aria-labelledby="rekapNilaiModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title font-weight-bold" id="rekapNilaiModalLabel"><i class="bi bi-card-checklist me-2"></i>Rekap Nilai Akhir Mahasiswa</h5>
                    <button type="button" class="close btn-close btn-close-white text-white" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close" style="background: none; border: none; font-size: 1.5rem; line-height: 1;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-dark text-start p-4">
                    <div id="rekapNilaiContent" class="table-responsive">
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Memuat data...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0 d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-secondary btn-pill" data-dismiss="modal" data-bs-dismiss="modal">Batal</button>
                    <form id="publishForm" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-primary btn-pill shadow-sm">Konfirmasi & Publish</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Ubah Status RPL -->
    <div class="modal fade" id="ubahStatusRplModal" tabindex="-1" aria-labelledby="ubahStatusRplModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <form method="POST" id="ubahStatusRplForm" class="w-100">
                @csrf
                <div class="modal-content border-0 shadow">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title font-weight-bold" id="ubahStatusRplModalLabel"><i class="bi bi-arrow-left-right me-2"></i>Ubah Status RPL</h5>
                        <button type="button" class="close btn-close btn-close-white text-white" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close" style="background: none; border: none; font-size: 1.5rem; line-height: 1;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-dark p-4">
                        <div class="stepper-wrapper d-flex justify-content-between align-items-center mb-4" id="rpl-stepper">
                            <div class="stepper-item" id="stepper-self-assessment">
                                <div class="stepper-circle"><span class="stepper-icon" id="icon-self-assessment">1</span></div>
                                <div class="stepper-label">Self-Assessment</div>
                            </div>
                            <div class="stepper-line"></div>
                            <div class="stepper-item" id="stepper-penilaian-assessor">
                                <div class="stepper-circle"><span class="stepper-icon" id="icon-penilaian-assessor">2</span></div>
                                <div class="stepper-label">Penilaian Assessor</div>
                            </div>
                            <div class="stepper-line"></div>
                            <div class="stepper-item" id="stepper-ditinjau-admin">
                                <div class="stepper-circle"><span class="stepper-icon" id="icon-ditinjau-admin">3</span></div>
                                <div class="stepper-label">Ditinjau Admin</div>
                            </div>
                            <div class="stepper-line"></div>
                            <div class="stepper-item" id="stepper-selesai">
                                <div class="stepper-circle"><span class="stepper-icon" id="icon-selesai">4</span></div>
                                <div class="stepper-label">Selesai</div>
                            </div>
                            <div class="stepper-line"></div>
                            <div class="stepper-item" id="stepper-banding">
                                <div class="stepper-circle"><span class="stepper-icon" id="icon-banding">5</span></div>
                                <div class="stepper-label">Banding</div>
                            </div>
                        </div>
                        <div class="mt-4 text-center d-flex justify-content-center gap-2" id="stepper-actions">
                        </div>
                    </div>
                    <div class="modal-footer bg-light border-0">
                        <button type="button" class="btn btn-secondary btn-pill" data-dismiss="modal" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

  </main>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
      function editData(mahasiswaId, id1, id2, id3, deadline) {
          document.getElementById('calonMahasiswaId').value = mahasiswaId;
          document.getElementById('assessor1_id').value = id1 || '';
          document.getElementById('assessor2_id').value = id2 || '';
          document.getElementById('assessor3_id').value = id3 || '';
          document.getElementById('deadline').value = deadline || '';
          updateAssessorOptions();
          var myModal = new bootstrap.Modal(document.getElementById('editModal'));
          myModal.show();
      }

      function updateAssessorOptions() {
          const selects = {
              assessor1: document.getElementById('assessor1_id'),
              assessor2: document.getElementById('assessor2_id'),
              assessor3: document.getElementById('assessor3_id')
          };

          const allAssessors = [ @foreach($assessor as $a) { id: '{{ $a->id }}', nama: '{{ $a->nama }}' }, @endforeach ];
          const selectedValues = Object.values(selects).map(s => s.value).filter(v => v !== '');

          Object.values(selects).forEach(select => {
              const currentValue = select.value;
              Array.from(select.options).forEach(option => {
                  if(option.value !== '') option.remove();
              });

              allAssessors.forEach(assessor => {
                  if (!selectedValues.includes(assessor.id) || assessor.id === currentValue) {
                      const option = new Option(assessor.nama, assessor.id);
                      select.add(option);
                  }
              });
              select.value = currentValue;
          });

          Object.values(selects).forEach(select => syncSearchableSelect(select));
      }

      // --- Searchable select: dropdown pencarian di atas <select> asli ---
      function syncSearchableSelect(select) {
          if (select._searchableSelectSync) {
              select._searchableSelectSync();
          }
      }

      function initSearchableSelect(select) {
          const wrapper = select.closest('.searchable-select-wrapper');
          if (!wrapper || wrapper.dataset.enhanced === '1') return;
          wrapper.dataset.enhanced = '1';

          const toggle = document.createElement('div');
          toggle.className = 'form-select form-select-premium w-100 searchable-select-toggle';
          toggle.innerHTML = '<span class="selected-text placeholder-text"></span><i class="bi bi-chevron-down"></i>';

          const panel = document.createElement('div');
          panel.className = 'searchable-select-panel';
          panel.innerHTML = `
              <input type="text" class="searchable-select-search" placeholder="Cari nama assessor...">
              <div class="searchable-select-options"></div>
          `;

          wrapper.appendChild(toggle);
          wrapper.appendChild(panel);

          const searchInput = panel.querySelector('.searchable-select-search');
          const optionsContainer = panel.querySelector('.searchable-select-options');
          const selectedTextEl = toggle.querySelector('.selected-text');

          function render(filter = '') {
              const query = filter.trim().toLowerCase();
              optionsContainer.innerHTML = '';
              let matchCount = 0;

              Array.from(select.options).forEach(option => {
                  const label = option.textContent;
                  if (query && !label.toLowerCase().includes(query)) return;

                  matchCount++;
                  const item = document.createElement('div');
                  item.className = 'searchable-select-option' + (option.value === select.value ? ' selected' : '');
                  item.textContent = label;
                  item.dataset.value = option.value;
                  item.addEventListener('click', () => {
                      select.value = option.value;
                      select.dispatchEvent(new Event('change'));
                      closePanel();
                  });
                  optionsContainer.appendChild(item);
              });

              if (matchCount === 0) {
                  const empty = document.createElement('div');
                  empty.className = 'searchable-select-empty';
                  empty.textContent = 'Tidak ada assessor ditemukan.';
                  optionsContainer.appendChild(empty);
              }
          }

          function updateToggleLabel() {
              const selectedOption = select.options[select.selectedIndex];
              const hasValue = selectedOption && selectedOption.value !== '';
              selectedTextEl.textContent = hasValue ? selectedOption.textContent : (select.options[0] ? select.options[0].textContent : 'Pilih...');
              selectedTextEl.classList.toggle('placeholder-text', !hasValue);
          }

          function openPanel() {
              wrapper.classList.add('open');
              searchInput.value = '';
              render();
              searchInput.focus();
          }

          function closePanel() {
              wrapper.classList.remove('open');
          }

          toggle.addEventListener('click', () => {
              if (wrapper.classList.contains('open')) {
                  closePanel();
              } else {
                  document.querySelectorAll('.searchable-select-wrapper.open').forEach(w => w.classList.remove('open'));
                  openPanel();
              }
          });

          searchInput.addEventListener('input', () => render(searchInput.value));
          searchInput.addEventListener('click', (e) => e.stopPropagation());

          document.addEventListener('click', (e) => {
              if (!wrapper.contains(e.target)) closePanel();
          });

          select._searchableSelectSync = updateToggleLabel;
          updateToggleLabel();
      }

      document.addEventListener('DOMContentLoaded', function () {
          document.querySelectorAll('.searchable-select-wrapper select').forEach(initSearchableSelect);
      });

      // --- Filter tab mahasiswa ---
      document.addEventListener('DOMContentLoaded', function () {
          const tabButtons = document.querySelectorAll('#filterTabs [data-filter]');
          const cards = document.querySelectorAll('.custom-card-list > [data-filter-tags]');
          const emptyState = document.getElementById('filterEmptyState');

          function updateCounts() {
              const counts = { semua: 0, 'belum-assessor': 0, 'siap-publish': 0, 'sudah-publish': 0 };
              cards.forEach(card => {
                  const tags = card.dataset.filterTags.split(' ');
                  tags.forEach(tag => {
                      if (counts.hasOwnProperty(tag)) counts[tag]++;
                  });
              });
              Object.keys(counts).forEach(key => {
                  const badge = document.querySelector(`#filterTabs [data-count="${key}"]`);
                  if (badge) badge.textContent = counts[key];
              });
          }

          function applyFilter(filter) {
              let visibleCount = 0;
              cards.forEach(card => {
                  const tags = card.dataset.filterTags.split(' ');
                  const show = tags.includes(filter);
                  card.style.display = show ? '' : 'none';
                  if (show) visibleCount++;
              });
              emptyState.style.display = visibleCount === 0 ? '' : 'none';
          }

          tabButtons.forEach(btn => {
              btn.addEventListener('click', function () {
                  tabButtons.forEach(b => b.classList.remove('active'));
                  this.classList.add('active');
                  applyFilter(this.dataset.filter);
              });
          });

          updateCounts();
          applyFilter('semua');
      });

      function showRekapNilai(mahasiswaId) {
          document.getElementById('publishForm').action = '/super/publish-results/' + mahasiswaId;
          document.getElementById('rekapNilaiContent').innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';

          fetch('/super/rekap-nilai/' + mahasiswaId)
              .then(response => response.json())
              .then(data => {
                  let html = '<table class="table table-bordered"><thead><tr><th>No</th><th>Mata Kuliah</th><th>Status</th><th>Nilai Akhir</th></tr></thead><tbody>';
                  data.final_results.forEach((item, idx) => {
                      html += `<tr>
                          <td>${idx+1}</td>
                          <td>${item.matkul}</td>
                          <td><span class="badge ${item.status === 'Lolos' ? 'bg-success' : 'bg-danger'}">${item.status}</span></td>
                          <td>${item.nilai}</td>
                      </tr>`;
                  });
                  html += '</tbody></table>';
                  document.getElementById('rekapNilaiContent').innerHTML = html;
              })
              .catch(error => {
                  document.getElementById('rekapNilaiContent').innerHTML = '<p class="text-danger">Gagal memuat data. Silakan coba lagi.</p>';
              });
              
          var rekapModal = new bootstrap.Modal(document.getElementById('rekapNilaiModal'));
          rekapModal.show();
      }

      function showUbahStatusRpl(mahasiswaId, currentStatus) {
          document.getElementById('ubahStatusRplForm').action = '/super/ubah-status-rpl/' + mahasiswaId;
          let steps = ['self-assessment', 'penilaian-assessor', 'ditinjau-admin', 'selesai', 'banding'];
          let stepLabels = {
              'self-assessment': 'Self-Assessment',
              'penilaian-assessor': 'Penilaian Assessor',
              'ditinjau-admin': 'Ditinjau Admin',
              'selesai': 'Selesai',
              'banding': 'Banding'
          };

          let normalizedStatus = currentStatus.replace(' ', '-');
          let currentIdx = steps.indexOf(normalizedStatus);
          if (currentIdx === -1) currentIdx = 0;

          steps.forEach((step, idx) => {
              let item = document.getElementById('stepper-' + step);
              let icon = document.getElementById('icon-' + step);
              if (item && icon) {
                  item.classList.remove('completed', 'active');
                  if (idx < currentIdx) {
                      item.classList.add('completed');
                      icon.innerHTML = '<i class="bi bi-check-lg"></i>';
                  } else if (idx === currentIdx) {
                      item.classList.add('active');
                      icon.innerText = (idx+1);
                  } else {
                      icon.innerText = (idx+1);
                  }
              }
          });

          let actions = '';
          if (currentIdx > 0) {
              let prevStep = steps[currentIdx - 1].replace('-', ' ');
              actions += `<button type="button" class="btn btn-warning" onclick="submitUbahStatusRpl('${prevStep}')">Kembali ke ${stepLabels[steps[currentIdx-1]]}</button>`;
          }
          if (currentIdx < steps.length - 1) {
              let nextStep = steps[currentIdx + 1].replace('-', ' ');
              actions += `<button type="button" class="btn btn-primary ms-2" onclick="submitUbahStatusRpl('${nextStep}')">Lanjut ke ${stepLabels[steps[currentIdx+1]]}</button>`;
          }
          document.getElementById('stepper-actions').innerHTML = actions;
          
          var statusModal = new bootstrap.Modal(document.getElementById('ubahStatusRplModal'));
          statusModal.show();
      }

      function submitUbahStatusRpl(status) {
          let form = document.getElementById('ubahStatusRplForm');
          let input = document.createElement('input');
          input.type = 'hidden';
          input.name = 'rpl_status';
          input.value = status;
          form.appendChild(input);
          form.submit();
      }

      document.addEventListener('DOMContentLoaded', updateAssessorOptions);
  </script>

  <style>
  .stepper-wrapper { width: 100%; position: relative; }
  .stepper-item { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px; position: relative; z-index: 2; }
  .stepper-circle { width: 36px; height: 36px; border-radius: 50%; background: #dee2e6; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; margin-bottom: 6px; transition: background 0.3s, color 0.3s; }
  .stepper-item.active .stepper-circle { background: #0d6efd; color: #fff; box-shadow: 0 0 0 4px #cfe2ff; }
  .stepper-item.completed .stepper-circle { background: #198754; color: #fff; }
  .stepper-label { font-size: 11px; text-align: center; margin-top: 2px; color: #495057; }
  .stepper-item.completed .stepper-label { color: #198754; font-weight: 500; }
  .stepper-item.active .stepper-label { color: #0d6efd; font-weight: 500; }
  .stepper-line { flex: 1; height: 3px; background: #dee2e6; margin-top: -20px; position: relative; top: 18px; z-index: 1; }
  .stepper-item:first-child .stepper-line:first-of-type, .stepper-item:last-child .stepper-line:last-of-type { display: none; }
  .stepper-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  </style>
@endsection