@extends('layout.super_admin')
@section('content')
<main id="main" class="main">
  <div class="pagetitle">
    <h1>Detail Banding Mahasiswa</h1>
  </div>
  <section class="section">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Detail Mahasiswa: {{ $camaba->nama }}</h5>
            <!-- Tabs -->
            <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link active" id="profil-tab" data-bs-toggle="tab" data-bs-target="#profil" type="button" role="tab" aria-controls="profil" aria-selected="true">Profil</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="ijazah-tab" data-bs-toggle="tab" data-bs-target="#ijazah" type="button" role="tab" aria-controls="ijazah" aria-selected="false">Ijazah</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="bukti-tab" data-bs-toggle="tab" data-bs-target="#bukti" type="button" role="tab" aria-controls="bukti" aria-selected="false">Bukti E-Porto</button>
              </li>
            </ul>
            <div class="tab-content pt-2" id="borderedTabContent">
              <!-- PROFIL -->
              <div class="tab-pane fade show active" id="profil" role="tabpanel" aria-labelledby="profil-tab">
                <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-pane fade" id="ijazah" role="tabpanel" aria-labelledby="ijazah-tab">
                <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-3"><div class="col-lg-3 col-md-4 label">File Ijazah</div><div class="col-lg-9 col-md-8">
                      @if($camaba->ijazah && ($camaba->ijazah->file ?? $camaba->ijazah->file_ijazah))
                        <a href="{{ asset('Data/Ijazah/' . ($camaba->ijazah->file ?? $camaba->ijazah->file_ijazah)) }}" target="_blank" class="btn btn-primary btn-sm">
                          <i class="bi bi-download"></i> Download Ijazah
                        </a>
                      @else
                        <span class="text-muted">File tidak tersedia</span>
                      @endif
                    </div></div>
                  </div>
                </div>
              </div>
              
              <!-- BUKTI CPMK -->
              <div class="tab-pane fade" id="bukti" role="tabpanel" aria-labelledby="bukti-tab">
                <h2>Bukti CPMK</h2>
                @if ($selfAssessmentcamaba->isEmpty())
                      <div class="alert alert-info" role="alert">
                          Mahasiswa belum melakukan self-assessment mata kuliah.
                      </div>
                  @else
                      

                      <div class="accordion" id="selfAssessmentAccordion">
                          @foreach($selfAssessmentcamaba as $nama_matkul => $assessments)
                              <div class="accordion-item">
                                  <h2 class="accordion-header" id="heading-{{ \Str::slug($nama_matkul) }}">
                                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ \Str::slug($nama_matkul) }}" aria-expanded="false">
                                          {{ $nama_matkul }}
                                      </button>
                                  </h2>
                                  <div id="collapse-{{ \Str::slug($nama_matkul) }}" class="accordion-collapse collapse" data-bs-parent="#selfAssessmentAccordion">
                                      <div class="accordion-body">
                                          <div class="table-responsive">
                                              <table class="table table-striped table-bordered">
                                                  <thead class="table-light">
                                                      <tr>
                                                          <th>CPMK</th>
                                                          <th>Nilai Dasar (dari Mahasiswa)</th>
                                                          <th>File Bukti CPMK</th>
                                                      </tr>
                                                  </thead>
                                                  <tbody>
                                                      @foreach($assessments as $item)
                                                          <tr>
                                                              <td>{{ $item->cpmk->penjelasan ?? 'CPMK tidak ditemukan' }}</td>
                                                              <td>{{ $item->nilai ?? '-' }}</td>
                                                              <td>
                                                                  @foreach($item->bukti as $bukti)
                                                                        <a href="{{ asset($bukti->file) }}" target="_blank">{{ $bukti->nama }}</a>
                                                                  @endforeach
                                                              </td>
                                                          </tr>
                                                      @endforeach
                                                  </tbody>
                                              </table>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          @endforeach
                      </div>
                  @endif
                
              </div>
            </div>
            <!-- Tabel Banding -->
            <div class="card mt-4">
              <div class="card-body">
                <h5 class="card-title">Mata Kuliah yang Diajukan Banding</h5>
                <form action="{{ route('super.proses-banding', $camaba->id) }}" method="POST">
                  @csrf
                  <div class="table-responsive">
                    <table class="table table-bordered">
                      <thead>
                        <tr>
                          <th>No</th>
                          <th>Mata Kuliah</th>
                          <th>Keterangan Banding</th>
                          <th>Nilai Akhir</th>
                          <th>Status Banding</th>
                        </tr>
                      </thead>
                      <tbody>
                        @php
                          // Group by matkul_id agar hanya satu baris per matkul
                          $banding_grouped = $banding_matkul->groupBy('matkul_id')->map(function($items) { return $items->first(); });
                        @endphp
                        @forelse($banding_grouped as $matkul_id => $banding)
                        <tr>
                          <td>{{ $loop->iteration }}</td>
                          <td>
                            {{ $banding->matkul->nama_matkul ?? '-' }}
                            
                          </td>
                          <td>{{ $banding->banding_keterangan }}</td>
                          <td>
                            <input type="number" name="nilai_akhir[{{ $matkul_id }}]" class="form-control" min="0" max="100" value="{{ $banding->nilai_akhir ?? '' }}" >
                          </td>
                          <td>
                            <select name="banding_status[{{ $matkul_id }}]" class="form-select" required>
                              <option value="pending" {{ $banding->banding_status=='pending' ? 'selected' : '' }}>Pending</option>
                              <option value="diterima" {{ $banding->banding_status=='diterima' ? 'selected' : '' }}>Diterima</option>
                              <option value="ditolak" {{ $banding->banding_status=='ditolak' ? 'selected' : '' }}>Ditolak</option>
                            </select>
                          </td>
                        </tr>
                        @empty
                        <tr>
                          <td colspan="5" class="text-center">Tidak ada matkul yang diajukan banding.</td>
                        </tr>
                        @endforelse
                      </tbody>
                    </table>
                  </div>
                  @if(count($banding_grouped))
                  <div class="text-center mt-3">
                    <button type="submit" class="btn btn-success">Simpan Semua Banding</button>
                  </div>
                  @endif
                </form>
                @php
                  $ada_banding_selesai = $banding_grouped->whereIn('banding_status', ['diterima','ditolak'])->count() > 0;
                @endphp
                @if($ada_banding_selesai)
                  <form action="{{ route('super.publish-results-banding', $camaba->id) }}" method="POST" class="mt-3" id="publishBandingFormAdmin">
                    @csrf
                    <button type="submit" class="btn btn-primary">Publikasikan Ulang Hasil Setelah Banding</button>
                  </form>
                  <script>
                  document.addEventListener('DOMContentLoaded', function() {
                    var form = document.getElementById('publishBandingFormAdmin');
                    if(form) {
                      form.addEventListener('submit', function(e) {
                        if(!confirm('Apakah Anda yakin ingin mempublish hasil banding?')) {
                          e.preventDefault();
                        }
                      });
                    }
                  });
                  </script>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>


@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Logika untuk TAB
    const tabButtons = document.querySelectorAll('.nav-link[data-bs-toggle="tab"]');
    tabButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            tabButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            // Sembunyikan semua tab-content lalu tampilkan yang target saja
            document.querySelectorAll('.tab-pane').forEach(tab => tab.classList.remove('show', 'active'));
            const target = document.querySelector(this.getAttribute('data-bs-target'));
            if(target) {
                target.classList.add('show', 'active');
            }
        });
    });

    // Logika untuk MODAL
    var cpmkModalEl = document.getElementById('cpmkModal');
    var cpmkModal = new bootstrap.Modal(cpmkModalEl);
    
    var matkulNameInModal = document.getElementById('matkulNameInModal');
    var cpmkModalBody = document.getElementById('cpmkModalBody');

    // Event listener untuk MEMBUKA modal
    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;
            cpmkModalBody.innerHTML = '<div class="text-center">Loading CPMK...</div>';

            // Ganti URL fetch ke endpoint yang sesuai untuk admin, jika berbeda.
            // Jika sama, biarkan /super/
            fetch(`/admin/matkul/${matkulId}/cpmk`) // Asumsi URL untuk admin adalah /admin/...
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.json();
                })
                .then(data => {
                    let html = '';
                    let cpmkList = [];

                    if (Array.isArray(data)) { cpmkList = data; } 
                    else if (data.success && Array.isArray(data.cpmks)) { cpmkList = data.cpmks; }

                    if (cpmkList.length > 0) {
                        html += '<div class="table-responsive"><table class="table table-striped">';
                        html += '<thead><tr><th>No</th><th>Kode CPMK</th><th>Penjelasan</th></tr></thead><tbody>';
                        cpmkList.forEach((cpmk, idx) => {
                            html += `<tr><td>${idx + 1}</td><td>${cpmk.kode_cpmk ?? '-'}</td><td>${cpmk.penjelasan ?? '-'}</td></tr>`;
                        });
                        html += '</tbody></table></div>';
                    } else {
                        html = '<div class="alert alert-info">Tidak ada CPMK yang tersedia untuk mata kuliah ini.</div>';
                    }
                    cpmkModalBody.innerHTML = html;
                })
                .catch(error => {
                    console.error('Error fetching CPMK:', error);
                    cpmkModalBody.innerHTML = '<div class="alert alert-danger">Terjadi kesalahan saat memuat data CPMK.</div>';
                });

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

    // Event listener manual untuk MENUTUP modal
    const closeButtons = cpmkModalEl.querySelectorAll('[data-dismiss="modal"]');
    closeButtons.forEach(button => {
        button.addEventListener('click', function() {
            cpmkModal.hide();
        });
    });
});
</script>
@endpush