@extends('layout.admin')
@section('content')
<style>
  .nav-pills-custom {
    background: #f8fafc;
    padding: 6px;
    border-radius: 14px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }

  .nav-pills-custom .nav-link {
    color: #475569 !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 20px;
    border-radius: 10px;
    border: none !important;
    background: transparent !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nav-pills-custom .nav-link:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
  }

  .nav-pills-custom .nav-link.active {
    color: #ffffff !important;
    background: #2563eb !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !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, clickedBtn) {
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active');
    });
    document.getElementById(tabName).classList.add('active');

    document.querySelectorAll('.nav-pills-custom .nav-link').forEach(btn => {
      btn.classList.remove('active');
    });

    if (clickedBtn) {
      clickedBtn.classList.add('active');
    } else if (typeof event !== 'undefined' && event.currentTarget) {
      event.currentTarget.classList.add('active');
    }
  }
</script>
<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 -->
            <div class="d-flex justify-content-center mb-4">
              <ul class="nav nav-pills nav-pills-custom">
                <li class="nav-item">
                  <button class="nav-link active" onclick="showTab('profil', this)">
                    <i class="fas fa-user-circle"></i> Profil
                  </button>
                </li>
                <li class="nav-item">
                  <button class="nav-link" onclick="showTab('bukti', this)">
                    <i class="fas fa-receipt"></i> Portofolio dan Bukti
                  </button>
                </li>
                <li class="nav-item">
                  <button class="nav-link" onclick="showTab('transkrip', this)">
                    <i class="fas fa-book"></i> Transkrip
                  </button>
                </li>
              </ul>
            </div>
            <div id="borderedTabContent">
              <!-- 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>
              <!-- PORTOFOLIO DAN BUKTI -->
              <div class="tab-content" id="bukti">
                <h2>Portofolio dan Bukti</h2>
                <div class="card">
                  <div class="card-header bg-light">
                    <h5 class="mb-0"><i class="fas fa-receipt me-2"></i>Bukti Alih Jenjang</h5>
                  </div>
                  <div class="card-body mt-3">
                    <div class="table-responsive">
                      <table class="table table-striped">
                        <thead>
                          <tr><th>No</th><th>Jenis Dokumen</th><th>Nama File</th><th>Aksi</th></tr>
                        </thead>
                        <tbody>
                          @if($camaba->ijazah && ($camaba->ijazah->file ?? $camaba->ijazah->file_ijazah))
                            <tr>
                              <td>1</td>
                              <td>Ijazah</td>
                              <td>{{ basename($camaba->ijazah->file ?? $camaba->ijazah->file_ijazah) }}</td>
                              <td>
                                <a href="{{ asset('Data/Ijazah/' . ($camaba->ijazah->file ?? $camaba->ijazah->file_ijazah)) }}" target="_blank" class="btn btn-sm btn-primary">
                                  <i class="bi bi-download"></i> Unduh
                                </a>
                              </td>
                            </tr>
                          @endif
                          @if($camaba->bukti_alih_jenjang && ($camaba->bukti_alih_jenjang instanceof \Illuminate\Support\Collection ? $camaba->bukti_alih_jenjang->count() > 0 : true))
                            @if($camaba->bukti_alih_jenjang instanceof \Illuminate\Support\Collection)
                              @foreach($camaba->bukti_alih_jenjang as $index => $bukti)
                                <tr>
                                  <td>{{ ($camaba->ijazah && ($camaba->ijazah->file ?? $camaba->ijazah->file_ijazah) ? 1 : 0) + $index + 1 }}</td>
                                  <td>{{ $bukti->jenis_bukti ?? $bukti->jenis_dokumen ?? '-' }}</td>
                                  <td>{{ $bukti->file_bukti ?? $bukti->file ?? '-' }}</td>
                                  <td>
                                    @if($bukti->file_bukti ?? $bukti->file)
                                      <a href="{{ asset('Data/Bukti_alih_jenjang/' . ($bukti->file_bukti ?? $bukti->file)) }}" target="_blank" class="btn btn-sm btn-primary">
                                        <i class="bi bi-download"></i> Unduh
                                      </a>
                                    @else
                                      <span class="text-muted">File tidak tersedia</span>
                                    @endif
                                  </td>
                                </tr>
                              @endforeach
                            @else
                              <tr>
                                <td>{{ ($camaba->ijazah && ($camaba->ijazah->file ?? $camaba->ijazah->file_ijazah) ? 1 : 0) + 1 }}</td>
                                <td>{{ $camaba->bukti_alih_jenjang->jenis_bukti ?? $camaba->bukti_alih_jenjang->jenis_dokumen ?? '-' }}</td>
                                <td>{{ $camaba->bukti_alih_jenjang->file_bukti ?? $camaba->bukti_alih_jenjang->file ?? '-' }}</td>
                                <td>
                                  @if($camaba->bukti_alih_jenjang->file_bukti ?? $camaba->bukti_alih_jenjang->file)
                                    <a href="{{ asset('Data/Bukti_alih_jenjang/' . ($camaba->bukti_alih_jenjang->file_bukti ?? $camaba->bukti_alih_jenjang->file)) }}" target="_blank" class="btn btn-sm btn-primary">
                                      <i class="bi bi-download"></i> Unduh
                                    </a>
                                  @else
                                    <span class="text-muted">File tidak tersedia</span>
                                  @endif
                                </td>
                              </tr>
                            @endif
                          @elseif(!($camaba->ijazah && ($camaba->ijazah->file ?? $camaba->ijazah->file_ijazah)))
                            <tr>
                              <td colspan="4" class="text-center">Belum ada bukti yang diunggah</td>
                            </tr>
                          @endif
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!-- TRANSKRIP -->
              <div class="tab-content" id="transkrip">
                <h2>Data Transkrip</h2>
                <div class="card">
                  <div class="card-body">
                    <!-- PDF Viewer -->
                    <div class="pdf-container mt-3 mb-3">
                        <embed 
                            src="{{ route('admin.view-transkrip', $existing_transkrip->file) }}"
                            type="application/pdf"
                            width="100%"
                            height="600px"
                        />
                    </div>
                    @if($camaba->transkrip && ($camaba->transkrip instanceof \Illuminate\Support\Collection ? $camaba->transkrip->count() > 0 : true))
                      <!--<div class="table-responsive">
                        <table class="table table-striped">
                          <thead>
                            <tr><th>No</th><th>Mata Kuliah</th><th>SKS</th><th>Nilai</th></tr>
                          </thead>
                          <tbody>
                            @if($camaba->transkrip instanceof \Illuminate\Support\Collection)
                              @foreach($camaba->transkrip as $index => $transkrip)
                                <tr><td>{{ (int)$index + 1 }}</td><td>{{ $transkrip->nama_matkul ?? '-' }}</td><td>{{ $transkrip->sks ?? '-' }}</td><td>{{ $transkrip->nilai ?? '-' }}</td></tr>
                              @endforeach
                            @else
                              <tr><td>1</td><td>{{ $camaba->transkrip->nama_matkul ?? '-' }}</td><td>{{ $camaba->transkrip->sks ?? '-' }}</td><td>{{ $camaba->transkrip->nilai ?? '-' }}</td></tr>
                            @endif
                          </tbody>
                        </table>
                      </div>
                      <div class="mt-3">
                        <strong>File Transkrip:</strong>
                        @php
                          $fileTranskrip = $camaba->transkrip instanceof \Illuminate\Support\Collection ? ($camaba->transkrip->first()->file_transkrip ?? $camaba->transkrip->first()->file ?? null) : ($camaba->transkrip->file_transkrip ?? $camaba->transkrip->file ?? null);
                        @endphp
                        @if($fileTranskrip)
                          <a href="{{ asset('Data/Transkrip/' . $fileTranskrip) }}" target="_blank" class="btn btn-primary btn-sm ms-2">
                            <i class="bi bi-download"></i> Download Transkrip
                          </a>
                        @else
                          <span class="text-muted ms-2">File tidak tersedia</span>
                        @endif
                      </div>-->
                    @else
                      <div class="alert alert-info" role="alert">Data transkrip tidak tersedia.</div>
                    @endif
                  </div>
                </div>
              </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('admin.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>Hasil Self-Assessment</th>
                          <th>Keterangan Banding</th>
                          <th>Bukti Banding</th>
                          <th>Nilai Sebelumnya</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(); });
                          $matkulAssessments = \Modules\AlihKredit\App\Models\MatkulAssessment::where('calon_mahasiswa_id', $camaba->id)->get()->keyBy('matkul_id');
                        @endphp
                        @forelse($banding_grouped as $matkul_id => $banding)
                        @php
                          $selfAssessmentValue = optional($matkulAssessments->get($matkul_id))->self_assessment_value;
                          $selfAssessmentBadgeClass = match($selfAssessmentValue) {
                              'Sangat Baik' => 'bg-success',
                              'Baik' => 'bg-primary',
                              'Tidak Pernah' => 'bg-danger',
                              default => 'bg-secondary',
                          };
                        @endphp
                        <tr>
                          <td>{{ $loop->iteration }}</td>
                          <td>
                            {{ $banding->matkul->nama_matkul ?? '-' }}
                            @if($banding->matkul)
                              <button type="button" class="btn btn-info btn-sm view-cpmk-btn ms-2"
                                data-matkul-id="{{ $banding->matkul->id }}"
                                data-matkul-name="{{ $banding->matkul->nama_matkul }}">
                                View Sub-CPMK
                              </button>
                            @endif
                          </td>
                          <td>
                            <span class="badge {{ $selfAssessmentBadgeClass }}">{{ $selfAssessmentValue ?? '-' }}</span>
                          </td>
                          <td>{{ $banding->banding_keterangan }}</td>
                          <td>
                            @if($banding->banding_bukti)
                              <a href="{{ asset('Data/BandingBukti/' . $banding->banding_bukti) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-download"></i> Lihat Bukti
                              </a>
                            @else
                              <span class="text-muted">-</span>
                            @endif
                          </td>
                          <td class="text-center">{{ $banding->nilai_akhir ?? '-' }}</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="8" 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('admin.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>

{{-- Pastikan HTML Modal memiliki tombol close (X) di header --}}
<div class="modal fade" id="cpmkModal" tabindex="-1" aria-labelledby="cpmkModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cpmkModalLabel">Sub-CPMK Mata Kuliah: <span id="matkulNameInModal"></span></h5>
        {{-- Tombol ini penting dan harus ada --}}
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="cpmkModalBody">
        {{-- Konten dinamis akan dimuat di sini oleh JavaScript --}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>
@endsection

{{-- Ganti keseluruhan blok @push('scripts') dengan ini --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // 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');
            const camabaId = {{ $camaba->id }};

            matkulNameInModal.textContent = matkulName;
            cpmkModalBody.innerHTML = '<div class="text-center">Loading Sub-CPMK...</div>';

            fetch(`/admin/matkul/${matkulId}/camaba/${camabaId}/sub-cpmk-assessment`)
                .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 align-middle">';
                        html += '<thead><tr><th>No</th><th>Kode Sub-CPMK</th><th>Penjelasan</th><th>Mata Kuliah Dasar</th><th>Nilai Dasar</th><th>Self Assessment</th><th>Alasan</th><th>Bukti</th></tr></thead><tbody>';
                        cpmkList.forEach((cpmk, idx) => {
                            let buktiHtml = '-';
                            if (Array.isArray(cpmk.bukti) && cpmk.bukti.length > 0) {
                                buktiHtml = cpmk.bukti.map((path, i) => {
                                    const url = `/${path}`;
                                    return `<a href="${url}" target="_blank" class="btn btn-sm btn-outline-info p-1 py-0 mb-1" style="font-size:11px;"><i class="bi bi-eye"></i> Bukti ${i + 1}</a>`;
                                }).join('<br>');
                            }

                            const selfValue = cpmk.self_assessment_value ?? '-';
                            let selfBadgeClass = 'bg-secondary';
                            if (selfValue === 'Sangat Baik') selfBadgeClass = 'bg-success';
                            else if (selfValue === 'Baik') selfBadgeClass = 'bg-primary';
                            else if (selfValue === 'Tidak Pernah') selfBadgeClass = 'bg-danger';

                            html += `<tr>
                                <td>${idx + 1}</td>
                                <td>${cpmk.kode_cpmk ?? '-'}</td>
                                <td>${cpmk.penjelasan ?? '-'}</td>
                                <td>${cpmk.matkul_dasar ?? '-'}</td>
                                <td>${cpmk.nilai_matkul_dasar ?? '-'}</td>
                                <td><span class="badge ${selfBadgeClass}">${selfValue}</span></td>
                                <td>${cpmk.alasan ?? '-'}</td>
                                <td>${buktiHtml}</td>
                            </tr>`;
                        });
                        html += '</tbody></table></div>';
                    } else {
                        html = '<div class="alert alert-info">Tidak ada Sub-CPMK yang tersedia untuk mata kuliah ini.</div>';
                    }
                    cpmkModalBody.innerHTML = html;
                })
                .catch(error => {
                    console.error('Error fetching Sub-CPMK:', error);
                    cpmkModalBody.innerHTML = '<div class="alert alert-danger">Terjadi kesalahan saat memuat data Sub-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