{{-- resources/views/admin/akademik/data-master/index.blade.php --}}
@extends('layouts.admin')
@section('title', 'Data Master Akademik')

@section('content')
<div class="page-inner">
  <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
    <div>
      <h3 class="fw-bold mb-3">Data Master Akademik</h3>
      <h6 class="op-7 mb-2">Kelola semua data referensi untuk sistem akademik.</h6>
    </div>
  </div>

  <div class="card card-round shadow-sm border-0">
    <div class="card-body">
      <div class="row">

        {{-- NAV TAB --}}
        <div class="col-md-3">
          <ul class="nav nav-pills flex-column" id="dataMasterTab" role="tablist">

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#tahun-ajaran">
                <i class="fas fa-calendar-alt me-2"></i> Tahun Ajaran
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#angkatan">
                <i class="fas fa-users me-2"></i> Angkatan
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#semester">
                <i class="fas fa-book-open me-2"></i> Semester
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#level-kelas">
                <i class="fas fa-layer-group me-2"></i> Tingkat Kelas
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#rombel">
                <i class="fas fa-users me-2"></i> Rombel
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#mapel-kategori">
                <i class="fas fa-tags me-2"></i> Kategori Mapel
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#mapel-nama">
                <i class="fas fa-book me-2"></i> Nama Mapel
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#jabatan-kategori">
                <i class="fas fa-briefcase me-2"></i> Kategori Jabatan
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#jabatan-nama">
                <i class="fas fa-user-tie me-2"></i> Nama Jabatan
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#absensi-status">
                <i class="fas fa-user-check me-2"></i> Status Absensi
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#kegiatan-jenis">
                <i class="fas fa-tasks me-2"></i> Jenis Kegiatan
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link text-start ps-3" data-bs-toggle="tab" href="#nilai-jenis">
                <i class="fas fa-percentage me-2"></i> Jenis Penilaian
              </a>
            </li>

          </ul>
        </div>

        {{-- TAB CONTENT --}}
        <div class="col-md-9">
          <div class="tab-content">

            <div class="tab-pane fade" id="tahun-ajaran">
              @include('admin.akademik.data-master._tab_tahun_ajaran')
            </div>

            <div class="tab-pane fade" id="angkatan">
              @include('admin.akademik.data-master._tab_angkatan')
            </div>

            <div class="tab-pane fade" id="semester">
              @include('admin.akademik.data-master._tab_semester')
            </div>

            <div class="tab-pane fade" id="level-kelas">
              @include('admin.akademik.data-master._tab_level_kelas')
            </div>

            <div class="tab-pane fade" id="rombel">
              @include('admin.akademik.data-master._tab_rombels')
            </div>

            <div class="tab-pane fade" id="mapel-kategori">
              @include('admin.akademik.data-master._tab_mapel_kategori')
            </div>

            <div class="tab-pane fade" id="mapel-nama">
              @include('admin.akademik.data-master._tab_mapel_nama')
            </div>

            <div class="tab-pane fade" id="jabatan-kategori">
              @include('admin.akademik.data-master._tab_jabatan_kategori')
            </div>

            <div class="tab-pane fade" id="jabatan-nama">
              @include('admin.akademik.data-master._tab_jabatan_nama')
            </div>

            <div class="tab-pane fade" id="absensi-status">
              @include('admin.akademik.data-master._tab_absensi_status')
            </div>

            <div class="tab-pane fade" id="kegiatan-jenis">
              @include('admin.akademik.data-master._tab_kegiatan_jenis')
            </div>

            <div class="tab-pane fade" id="nilai-jenis">
              @include('admin.akademik.data-master._tab_nilai_jenis')
            </div>

          </div>
        </div>

      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get('tab');

    let targetTab = tab
        ? document.querySelector(`a[data-bs-toggle="tab"][href="#${tab}"]`)
        : document.querySelector(`a[data-bs-toggle="tab"]`);

    if (targetTab) {
        new bootstrap.Tab(targetTab).show();
    }

    document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(el => {
        el.addEventListener('shown.bs.tab', function (e) {
            const id = e.target.getAttribute('href').substring(1);
            history.replaceState(null, '', `?tab=${id}`);
        });
    });
});
</script>
@endpush