# DUMP PROYEK: 5 VIEWS ADMIN KEUANGAN PPDB
> Diekstrak pada: 2026-10-04 21:45:03

## File: `resources/views/admin/wali-kelas/index.blade.php`
```php
{{-- resources/views/admin/wali-kelas/index.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'Manajemen Wali Kelas')

@section('content')
<div class="container-fluid py-4">

    @php
        $currentTaId = request('tahun_ajaran_id', $taAktif->id ?? null);
        $currentSemId = request('semester_id', $semesterAktif->id ?? null);
    @endphp

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Manajemen Wali Kelas - Jenjang {{ $jenjang->nama_jenjang }}</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Tentukan Guru yang bertanggung jawab sebagai Wali Kelas untuk setiap Ruang Kelas.</p>
        </div>
        
        <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 m-0 bg-white p-1 rounded-3 shadow-sm border">
            <div class="d-flex align-items-center">
                <i class="bi bi-funnel text-muted ms-2 me-1"></i>
                <select name="tahun_ajaran_id" class="form-select form-select-sm border-0 shadow-none fw-medium text-dark bg-transparent" onchange="this.form.submit()" style="min-width: 180px;">
                    @if(isset($tahunAjarans))
                        @foreach($tahunAjarans as $ta)
                            <option value="{{ $ta->id }}" {{ $currentTaId == $ta->id ? 'selected' : '' }}>
                                {{ $ta->tahun_ajaran }} {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="vr bg-secondary opacity-25"></div>
            <select name="semester_id" class="form-select form-select-sm border-0 shadow-none fw-medium text-dark bg-transparent" onchange="this.form.submit()" style="min-width: 120px;">
                @if(isset($semesters))
                    @foreach($semesters as $sem)
                        <option value="{{ $sem->id }}" {{ $currentSemId == $sem->id ? 'selected' : '' }}>
                            {{ $sem->nama }} {{ $sem->is_active ? '(Aktif)' : '' }}
                        </option>
                    @endforeach
                @endif
            </select>
        </form>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm mb-4">
            <ul class="mb-0 fw-medium">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card shadow-sm border-top-0 border-end-0 border-bottom-0 border-start border-primary" style="border-left-width: 4px !important;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-bordered align-middle mb-0" style="font-size: 14px;">
                    <thead class="table-light text-center">
                        <tr>
                            <th style="width: 5%">NO</th>
                            <th style="width: 15%">TINGKAT KELAS</th>
                            <th style="width: 15%">RUANG KELAS</th>
                            <th style="width: 20%">PENGATURAN KUOTA (GENDER)</th>
                            <th style="width: 15%">KAPASITAS</th>
                            <th style="width: 25%">WALI KELAS</th>
                            <th style="width: 5%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $no = 1; @endphp
                        @forelse($jenjang->tingkats as $tingkat)
                            @forelse($tingkat->kelases as $kelas)
                                @if($kelas->details->count() > 0)
                                    @php $detailCount = $kelas->details->count(); @endphp
                                    
                                    @foreach($kelas->details as $index => $dtl)
                                        @php
                                            $waliData = $waliKelasList->where('kelas_id', $kelas->id)
                                                                      ->where('kelas_detail_id', $dtl->id)
                                                                      ->first();
                                            $namaWaliKelas = $waliData ? $waliData->guru->nama_lengkap : null;
                                            $guruIdTerpilih = $waliData ? $waliData->guru_id : null;
                                        @endphp
                                        <tr>
                                            @if($index == 0)
                                                <td class="text-center text-muted" rowspan="{{ $detailCount }}">{{ $no++ }}</td>
                                                <td class="fw-medium ps-3 text-dark" rowspan="{{ $detailCount }}">{{ $tingkat->nama_tingkat }}</td>
                                                <td class="fw-bold text-success text-center" rowspan="{{ $detailCount }}">{{ $kelas->nama_kelas }}</td>
                                            @endif
                                            
                                            <td class="text-center">
                                                <span class="badge bg-info text-dark border border-info-subtle px-3 py-1">
                                                    {{ $dtl->gender->nama_gender ?? 'Unknown' }}
                                                </span>
                                            </td>
                                            <td class="text-center fw-bold text-primary bg-light">
                                                {{ $dtl->kapasitas }} Siswa
                                            </td>
                                            
                                            <td>
                                                @if($namaWaliKelas)
                                                    <div class="d-flex align-items-center gap-2">
                                                        <i class="bi bi-person-check-fill text-success fs-5"></i>
                                                        <span class="fw-bold text-dark">{{ $namaWaliKelas }}</span>
                                                    </div>
                                                @else
                                                    <span class="text-danger fst-italic" style="font-size: 13px;"><i class="bi bi-exclamation-circle me-1"></i>Belum diatur</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-outline-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#modalEditWali-dtl-{{ $dtl->id }}" title="Atur Wali Kelas">
                                                    <i class="bi bi-pencil-square"></i>
                                                </button>
                                            </td>
                                        </tr>

                                        <div class="modal fade" id="modalEditWali-dtl-{{ $dtl->id }}" tabindex="-1" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <form action="{{ route('admin.wali-kelas.store_or_update') }}" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="kelas_id" value="{{ $kelas->id }}">
                                                    <input type="hidden" name="kelas_detail_id" value="{{ $dtl->id }}">
                                                    <input type="hidden" name="tahun_ajaran_id" value="{{ $currentTaId }}">
                                                    <input type="hidden" name="semester_id" value="{{ $currentSemId }}">
                                                    
                                                    <div class="modal-content border-0 shadow">
                                                        <div class="modal-header border-bottom-0 bg-light">
                                                            <h5 class="modal-title fw-bold">Atur Wali Kelas</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body p-4">
                                                            <div class="row mb-3">
                                                                <div class="col-6">
                                                                    <label class="form-label fw-medium text-muted" style="font-size: 12px;">TINGKAT KELAS</label>
                                                                    <input type="text" class="form-control bg-light fw-bold" value="{{ $tingkat->nama_tingkat }}" readonly>
                                                                </div>
                                                                <div class="col-6">
                                                                    <label class="form-label fw-medium text-muted" style="font-size: 12px;">RUANG KELAS</label>
                                                                    <input type="text" class="form-control bg-light fw-bold text-success" value="{{ $kelas->nama_kelas }}" readonly>
                                                                </div>
                                                            </div>

                                                            <div class="row mb-4">
                                                                <div class="col-8">
                                                                    <label class="form-label fw-medium text-muted" style="font-size: 12px;">TARGET KUOTA GENDER</label>
                                                                    <div class="form-control bg-light d-flex align-items-center" style="min-height: 38px;">
                                                                        <span class="badge bg-info text-dark">{{ $dtl->gender->nama_gender ?? 'Unknown' }}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <label class="form-label fw-medium text-muted" style="font-size: 12px;">KAPASITAS</label>
                                                                    <input type="text" class="form-control bg-light text-center" value="{{ $dtl->kapasitas }}" readonly>
                                                                </div>
                                                            </div>

                                                            <hr class="text-secondary opacity-25">

                                                            <div class="mb-2">
                                                                <label class="form-label fw-bold text-primary">Pilih Wali Kelas <span class="text-danger">*</span></label>
                                                                <select name="guru_id" class="form-select border-primary shadow-sm" required>
                                                                    <option value="">-- Pilih Guru / Tenaga Pendidik --</option>
                                                                    @if(isset($gurus))
                                                                        @foreach($gurus as $guru)
                                                                            @php
                                                                                $isAssignedElsewhere = in_array($guru->id, $assignedGuruIds ?? []) && $guru->id != $guruIdTerpilih;
                                                                            @endphp
                                                                            
                                                                            @if(!$isAssignedElsewhere)
                                                                                <option value="{{ $guru->id }}" {{ $guruIdTerpilih == $guru->id ? 'selected' : '' }}>
                                                                                    {{ $guru->nama_lengkap }} ({{ $guru->nip ?? 'Non-NIP' }}) - {{ $guru->jenis_kelamin == 'L' ? 'L' : 'P' }}
                                                                                </option>
                                                                            @endif
                                                                        @endforeach
                                                                    @endif
                                                                </select>
                                                                <div class="form-text mt-2" style="font-size: 12px;">Pilih guru untuk menangani kelompok santri <b>{{ $dtl->gender->nama_gender ?? '' }}</b> di kelas ini. Guru yang sudah menjabat di kelas lain tidak ditampilkan.</div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer border-top-0 bg-light">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                                            <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i> Simpan Wali Kelas</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    @endforeach

                                @else
                                    @php
                                        // Cek Wali Kelas dari database untuk kelas campuran (kelas_detail_id = null)
                                        $waliData = $waliKelasList->where('kelas_id', $kelas->id)->whereNull('kelas_detail_id')->first();
                                        $namaWaliKelas = $waliData ? $waliData->guru->nama_lengkap : null;
                                        $guruIdTerpilih = $waliData ? $waliData->guru_id : null;
                                    @endphp
                                    <tr>
                                        <td class="text-center text-muted">{{ $no++ }}</td>
                                        <td class="fw-medium ps-3 text-dark">{{ $tingkat->nama_tingkat }}</td>
                                        <td class="fw-bold text-success text-center">{{ $kelas->nama_kelas }}</td>
                                        
                                        <td class="text-center">
                                            <span class="badge bg-secondary px-3 py-1 text-white">Kelas Campuran</span>
                                        </td>
                                        
                                        <td class="text-center fw-bold text-primary bg-light">
                                            {{ $kelas->kapasitas ? $kelas->kapasitas . ' Siswa' : 'Tak Terbatas' }}
                                        </td>

                                        <td>
                                            @if($namaWaliKelas)
                                                <div class="d-flex align-items-center gap-2">
                                                    <i class="bi bi-person-check-fill text-success fs-5"></i>
                                                    <span class="fw-bold text-dark">{{ $namaWaliKelas }}</span>
                                                </div>
                                            @else
                                                <span class="text-danger fst-italic" style="font-size: 13px;"><i class="bi bi-exclamation-circle me-1"></i>Belum diatur</span>
                                            @endif
                                        </td>

                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-outline-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#modalEditWali-kelas-{{ $kelas->id }}" title="Atur Wali Kelas">
                                                <i class="bi bi-pencil-square"></i>
                                            </button>
                                        </td>
                                    </tr>

                                    <div class="modal fade" id="modalEditWali-kelas-{{ $kelas->id }}" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <form action="{{ route('admin.wali-kelas.store_or_update') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="kelas_id" value="{{ $kelas->id }}">
                                                <input type="hidden" name="tahun_ajaran_id" value="{{ $currentTaId }}">
                                                <input type="hidden" name="semester_id" value="{{ $currentSemId }}">
                                                
                                                <div class="modal-content border-0 shadow">
                                                    <div class="modal-header border-bottom-0 bg-light">
                                                        <h5 class="modal-title fw-bold">Atur Wali Kelas</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body p-4">
                                                        
                                                        <div class="row mb-3">
                                                            <div class="col-6">
                                                                <label class="form-label fw-medium text-muted" style="font-size: 12px;">TINGKAT KELAS</label>
                                                                <input type="text" class="form-control bg-light fw-bold" value="{{ $tingkat->nama_tingkat }}" readonly>
                                                            </div>
                                                            <div class="col-6">
                                                                <label class="form-label fw-medium text-muted" style="font-size: 12px;">RUANG KELAS</label>
                                                                <input type="text" class="form-control bg-light fw-bold text-success" value="{{ $kelas->nama_kelas }}" readonly>
                                                            </div>
                                                        </div>

                                                        <div class="row mb-4">
                                                            <div class="col-8">
                                                                <label class="form-label fw-medium text-muted" style="font-size: 12px;">PENGATURAN KUOTA (GENDER)</label>
                                                                <div class="form-control bg-light" style="min-height: 38px;">
                                                                    <span class="badge bg-secondary">Campuran</span>
                                                                </div>
                                                            </div>
                                                            <div class="col-4">
                                                                <label class="form-label fw-medium text-muted" style="font-size: 12px;">TOTAL</label>
                                                                <input type="text" class="form-control bg-light text-center" value="{{ $kelas->kapasitas ?: 'Unlimited' }}" readonly>
                                                            </div>
                                                        </div>

                                                        <hr class="text-secondary opacity-25">

                                                        <div class="mb-2">
                                                            <label class="form-label fw-bold text-primary">Pilih Wali Kelas <span class="text-danger">*</span></label>
                                                            <select name="guru_id" class="form-select border-primary shadow-sm" required>
                                                                <option value="">-- Pilih Guru / Tenaga Pendidik --</option>
                                                                @if(isset($gurus))
                                                                    @foreach($gurus as $guru)
                                                                        @php
                                                                            // Cek apakah guru sudah jadi wali kelas di slot/kelas lain
                                                                            $isAssignedElsewhere = in_array($guru->id, $assignedGuruIds ?? []) && $guru->id != $guruIdTerpilih;
                                                                        @endphp
                                                                        
                                                                        @if(!$isAssignedElsewhere)
                                                                            <option value="{{ $guru->id }}" {{ $guruIdTerpilih == $guru->id ? 'selected' : '' }}>
                                                                                {{ $guru->nama_lengkap }} ({{ $guru->nip ?? 'Non-NIP' }}) - {{ $guru->jenis_kelamin == 'L' ? 'L' : 'P' }}
                                                                            </option>
                                                                        @endif
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                            <div class="form-text mt-2" style="font-size: 12px;">Data diambil dari Menu: <b>Kepegawaian -> Data Guru</b>. Guru yang sudah menjabat di kelas lain tidak ditampilkan.</div>
                                                        </div>

                                                    </div>
                                                    <div class="modal-footer border-top-0 bg-light">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                                        <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i> Simpan Wali Kelas</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                @endif
                                
                            @empty
                                <tr>
                                    <td class="text-center text-muted">{{ $no++ }}</td>
                                    <td class="fw-medium ps-3 text-dark">{{ $tingkat->nama_tingkat }}</td>
                                    <td colspan="5" class="text-muted text-center fst-italic">Belum ada ruang kelas yang dibuat di tingkat ini.</td>
                                </tr>
                            @endforelse
                        @empty
                            <tr>
                                <td colspan="7" class="text-muted text-center fst-italic py-4">
                                    <i class="bi bi-inboxes fs-3 d-block mb-2 opacity-50"></i>
                                    Belum ada Tingkat Kelas untuk jenjang ini.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2000 });
        @endif
        @if(session('error'))
            Swal.fire({ icon: 'error', title: 'Gagal!', text: '{{ session('error') }}', showConfirmButton: true });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/alokasi-waktu/index.blade.php`
```php
{{-- resources/views/admin/alokasi-waktu/index.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Data Alokasi Waktu')
@section('content')
<div class="container-fluid py-4">
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Manajemen Alokasi Waktu</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">Pilih jenjang pendidikan di bawah ini untuk mengelola daftar durasi jam pelajarannya.</p>
    </div>

    @include('admin.alokasi-waktu.layout-menu')

    <div class="row g-4">
        <!-- SISI KIRI: MENU DINAMIS VERTIKAL (JENJANG) -->
        <div class="col-md-3">
            <div class="card shadow-sm border-0 sticky-top" style="top: 20px;">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="mb-0 fw-bold text-primary"><i class="bi bi-layers me-2"></i>Pilih Jenjang</h6>
                </div>
                <div class="card-body p-2">
                    @if(isset($jenjangs) && $jenjangs->count() > 0)
                        <ul class="nav nav-pills flex-column">
                            @foreach($jenjangs as $jm)
                                <li class="nav-item mb-1">
                                    <a class="nav-link px-3 py-2 {{ $jm->id == $currentJenjang->id ? 'active fw-bold shadow-sm' : 'text-dark hover-bg-light' }}" 
                                       href="{{ route('admin.alokasi-waktu.jenjang', $jm->id) }}"
                                       style="border-radius: 6px; font-size: 14px;">
                                        <i class="bi bi-clock-history me-2"></i> Waktu {{ $jm->nama_jenjang }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-muted small text-center mb-0 py-3">Belum ada jenjang pendidikan.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- SISI KANAN: KONTEN TABEL & FILTER -->
        <div class="col-md-9">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold text-primary mb-0 border-start border-4 border-primary ps-2">Daftar Waktu: {{ $currentJenjang->nama_jenjang }}</h5>
                <button type="button" class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambah">
                    <i class="bi bi-plus-circle me-1"></i> Tambah Alokasi
                </button>
            </div>

            <!-- FILTER BARIS 1: MENU DINAMIS HARI -->
            <div class="nav-wrapper position-relative mb-2">
                <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex flex-nowrap overflow-auto" role="tablist" style="scrollbar-width: none;">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active px-3 py-1 btn-filter-hari fw-bold shadow-sm" data-hari="semua" style="border-radius: 6px; font-size: 13px;">Semua Hari</button>
                    </li>
                    @foreach($haris as $h)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link px-3 py-1 btn-filter-hari text-dark" data-hari="{{ $h->id }}" style="border-radius: 6px; font-size: 13px;">{{ $h->nama_hari }}</button>
                    </li>
                    @endforeach
                </ul>
            </div>

            <!-- FILTER BARIS 2: MENU DINAMIS KATEGORI (Baru Ditambahkan) -->
            <div class="nav-wrapper position-relative mb-3">
                <ul class="nav nav-pills p-1 bg-light border rounded-3 d-flex flex-nowrap overflow-auto" role="tablist" style="scrollbar-width: none;">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active px-3 py-1 btn-filter-kategori fw-bold shadow-sm bg-secondary text-white" data-kategori="semua" style="border-radius: 6px; font-size: 12px;">Semua Sesi</button>
                    </li>
                    @foreach($kategoris as $k)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link px-3 py-1 btn-filter-kategori text-secondary" data-kategori="{{ $k->id }}" style="border-radius: 6px; font-size: 12px;">{{ $k->nama_kategori }}</button>
                    </li>
                    @endforeach
                </ul>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered align-middle mb-0" style="font-size: 14px;">
                            <thead class="table-light">
                                <tr style="font-size: 13px;">
                                    <th class="text-center" width="5%">NO</th>
                                    <th width="15%">HARI</th>
                                    <th width="15%">KATEGORI</th>
                                    <th width="20%">DURASI WAKTU</th>
                                    <th width="20%">STATUS PENGGUNAAN</th>
                                    <th>KETERANGAN</th>
                                    <th class="text-center" width="10%">AKSI</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $nomor = 1; @endphp
                                @forelse($alokasiWaktus as $waktu)
                                <!-- Tambahkan data-kategori-id pada tr untuk Filter Ganda -->
                                <tr class="row-alokasi" data-hari-id="{{ $waktu->hari_id }}" data-kategori-id="{{ $waktu->kategori_id }}">
                                    <td class="text-center text-muted row-nomor">{{ $nomor++ }}</td>
                                    <td class="text-dark fw-medium">{{ $waktu->hari->nama_hari ?? 'Error/Deleted' }}</td>
                                    <td><span class="badge bg-secondary">{{ $waktu->kategori->nama_kategori ?? '-' }}</span></td>
                                    <td class="text-success fw-bold">
                                        @if($waktu->durasi)
                                            {{ \Carbon\Carbon::parse($waktu->durasi->jam_mulai)->format('H:i') }} - 
                                            {{ \Carbon\Carbon::parse($waktu->durasi->jam_selesai)->format('H:i') }}
                                        @endif
                                    </td>
                                    <td>
                                        @if($waktu->is_mapel == 1)
                                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary"><i class="bi bi-book"></i> Mapel</span>
                                        @else
                                            <span class="badge bg-danger bg-opacity-10 text-danger border border-danger">
                                                <i class="bi bi-cup-hot"></i> {{ $waktu->status_custom ?? 'Lainya' }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-muted">{{ $waktu->keterangan ?? '-' }}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $waktu->id }}">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>
                                        <form action="{{ route('admin.alokasi-waktu.destroy', $waktu->id) }}" method="POST" id="form-delete-{{ $waktu->id }}" class="d-inline">
                                            @csrf @method('DELETE')
                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete({{ $waktu->id }}, 'Alokasi Waktu Ini')">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="7" class="text-center py-5 text-muted row-kosong">Belum ada alokasi waktu.</td></tr>
                                @endforelse
                                <tr id="row_not_found" style="display: none;"><td colspan="7" class="text-center py-4 text-muted fst-italic">Data tidak ditemukan pada filter ini.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah (Diperlebar menjadi modal-xl) -->
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <form action="{{ route('admin.alokasi-waktu.store') }}" method="POST">
            @csrf
            <input type="hidden" name="jenjang_id" value="{{ $currentJenjang->id }}">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold">Tambah Alokasi ({{ $currentJenjang->nama_jenjang }})</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body bg-white p-4">
                    <div class="row g-4 mb-4">
                        <!-- Tabel Checkbox Hari -->
                        <div class="col-md-3">
                            <label class="form-label fw-bold">1. Pilih Hari</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="30%" class="text-center">Pilih</th><th>Nama Hari</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($haris as $h)
                                        <tr>
                                            <td class="text-center"><input class="form-check-input" type="checkbox" name="hari_id[]" value="{{ $h->id }}"></td>
                                            <td>{{ $h->nama_hari }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Tabel Checkbox Kategori -->
                        <div class="col-md-4">
                            <label class="form-label fw-bold">2. Pilih Kategori</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="30%" class="text-center">Pilih</th><th>Kategori</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($kategoris as $k)
                                        <tr>
                                            <td class="text-center"><input class="form-check-input" type="checkbox" name="kategori_id[]" value="{{ $k->id }}"></td>
                                            <td>{{ $k->nama_kategori }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Tabel Checkbox Durasi -->
                        <div class="col-md-5">
                            <label class="form-label fw-bold">3. Pilih Durasi Waktu</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="20%" class="text-center">Pilih</th><th>Jam Mulai</th><th>Jam Selesai</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($durasis as $d)
                                        <tr>
                                            <td class="text-center"><input class="form-check-input" type="checkbox" name="durasi_id[]" value="{{ $d->id }}"></td>
                                            <td>{{ \Carbon\Carbon::parse($d->jam_mulai)->format('H:i') }}</td>
                                            <td>{{ \Carbon\Carbon::parse($d->jam_selesai)->format('H:i') }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">4. Status Penggunaan</label>
                            <select name="is_mapel" class="form-select select-penggunaan" data-target="status_tambahan_tambah" required>
                                <option value="" disabled selected>-- Pilih Status --</option>
                                <option value="1">Diisi Mata Pelajaran</option>
                                <option value="0">Diisi Lainya</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4" id="status_tambahan_tambah" style="display: none;">
                            <label class="form-label fw-bold text-danger">Tulis Status Lainya</label>
                            <input type="text" name="status_custom" class="form-control input-status" placeholder="Cth: Istirahat, Upacara, Senam">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">5. Keterangan Tambahan</label>
                            <input type="text" name="keterangan" class="form-control" placeholder="Cth: Di Lapangan Utama">
                            <small class="text-muted" style="font-size: 11px;">Opsional.</small>
                        </div>
                    </div>

                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i> Simpan Alokasi Massal</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal Edit (Dalam Looping - modal-xl) -->
@foreach($alokasiWaktus as $waktu)
<div class="modal fade" id="modalEdit{{ $waktu->id }}" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <form action="{{ route('admin.alokasi-waktu.update', $waktu->id) }}" method="POST">
            @csrf @method('PUT')
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold">Edit Alokasi Tunggal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body bg-white p-4">
                    <div class="row g-4 mb-4">
                        <div class="col-md-3">
                            <label class="form-label fw-bold">1. Pilih Hari</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="30%" class="text-center">Pilih</th><th>Nama Hari</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($haris as $h)
                                        <tr>
                                            <td class="text-center">
                                                <input class="form-check-input" type="radio" name="hari_id" value="{{ $h->id }}" {{ $waktu->hari_id == $h->id ? 'checked' : '' }} required>
                                            </td>
                                            <td>{{ $h->nama_hari }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">2. Pilih Kategori</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="30%" class="text-center">Pilih</th><th>Kategori</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($kategoris as $k)
                                        <tr>
                                            <td class="text-center">
                                                <input class="form-check-input" type="radio" name="kategori_id" value="{{ $k->id }}" {{ $waktu->kategori_id == $k->id ? 'checked' : '' }} required>
                                            </td>
                                            <td>{{ $k->nama_kategori }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <label class="form-label fw-bold">3. Pilih Durasi Waktu</label>
                            <div class="table-responsive border rounded" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-sm table-hover mb-0">
                                    <thead class="table-light position-sticky top-0">
                                        <tr><th width="20%" class="text-center">Pilih</th><th>Jam Mulai</th><th>Jam Selesai</th></tr>
                                    </thead>
                                    <tbody>
                                        @foreach($durasis as $d)
                                        <tr>
                                            <td class="text-center">
                                                <input class="form-check-input" type="radio" name="durasi_id" value="{{ $d->id }}" {{ $waktu->durasi_id == $d->id ? 'checked' : '' }} required>
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($d->jam_mulai)->format('H:i') }}</td>
                                            <td>{{ \Carbon\Carbon::parse($d->jam_selesai)->format('H:i') }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">4. Status Penggunaan</label>
                            <select name="is_mapel" class="form-select select-penggunaan" data-target="status_tambahan_edit_{{ $waktu->id }}" required>
                                <option value="1" {{ $waktu->is_mapel == 1 ? 'selected' : '' }}>Diisi Mata Pelajaran</option>
                                <option value="0" {{ $waktu->is_mapel == 0 ? 'selected' : '' }}>Diisi Lainya</option>
                            </select>
                        </div>
                        
                        <div class="col-md-4" id="status_tambahan_edit_{{ $waktu->id }}" style="display: {{ $waktu->is_mapel == 0 ? 'block' : 'none' }};">
                            <label class="form-label fw-bold text-danger">Tulis Status Lainya</label>
                            <input type="text" name="status_custom" class="form-control input-status" value="{{ $waktu->status_custom }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold">5. Keterangan Tambahan</label>
                            <input type="text" name="keterangan" class="form-control" value="{{ $waktu->keterangan }}">
                            <small class="text-muted" style="font-size: 11px;">Opsional.</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i> Update Alokasi</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endforeach

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus ' + nama + '?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        
        // --- SCRIPT FILTER GANDA (HARI & KATEGORI) ---
        let currentHari = 'semua';
        let currentKategori = 'semua';
        const rows = document.querySelectorAll('.row-alokasi');
        const rowNotFound = document.getElementById('row_not_found');

        function applyFilter() {
            let visibleCount = 0;
            let counter = 1;

            rows.forEach(row => {
                const rowHari = row.getAttribute('data-hari-id');
                const rowKategori = row.getAttribute('data-kategori-id');
                
                const matchHari = (currentHari === 'semua' || rowHari === currentHari);
                const matchKategori = (currentKategori === 'semua' || rowKategori === currentKategori);

                if (matchHari && matchKategori) {
                    row.style.display = '';
                    row.querySelector('.row-nomor').innerText = counter++; // Update nomor urut
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            if(visibleCount === 0 && rows.length > 0) {
                rowNotFound.style.display = '';
            } else {
                rowNotFound.style.display = 'none';
            }
        }

        // Event Listener Tombol Hari
        const btnFiltersHari = document.querySelectorAll('.btn-filter-hari');
        btnFiltersHari.forEach(btn => {
            btn.addEventListener('click', function() {
                btnFiltersHari.forEach(b => {
                    b.classList.remove('active', 'fw-bold', 'shadow-sm');
                    b.classList.add('text-dark');
                });
                this.classList.add('active', 'fw-bold', 'shadow-sm');
                this.classList.remove('text-dark');
                
                currentHari = this.getAttribute('data-hari');
                applyFilter();
            });
        });

        // Event Listener Tombol Kategori
        const btnFiltersKategori = document.querySelectorAll('.btn-filter-kategori');
        btnFiltersKategori.forEach(btn => {
            btn.addEventListener('click', function() {
                btnFiltersKategori.forEach(b => {
                    b.classList.remove('active', 'fw-bold', 'shadow-sm', 'bg-secondary', 'text-white');
                    b.classList.add('text-secondary');
                });
                this.classList.add('active', 'fw-bold', 'shadow-sm', 'bg-secondary', 'text-white');
                this.classList.remove('text-secondary');
                
                currentKategori = this.getAttribute('data-kategori');
                applyFilter();
            });
        });

        // --- SCRIPT FORM INPUT TEKS STATUS ---
        const selects = document.querySelectorAll('.select-penggunaan');
        selects.forEach(select => {
            select.addEventListener('change', function() {
                const targetId = this.getAttribute('data-target');
                const targetContainer = document.getElementById(targetId);
                const targetInput = targetContainer.querySelector('.input-status');

                if (this.value === '0') {
                    targetContainer.style.display = 'block';
                    targetInput.setAttribute('required', 'required');
                } else {
                    targetContainer.style.display = 'none';
                    targetInput.removeAttribute('required');
                    targetInput.value = ''; 
                }
            });
            
            if(select.value === '0') {
                const targetId = select.getAttribute('data-target');
                const targetContainer = document.getElementById(targetId);
                const targetInput = targetContainer.querySelector('.input-status');
                
                targetContainer.style.display = 'block';
                targetInput.setAttribute('required', 'required');
            }
        });

        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{!! session('success') !!}', showConfirmButton: false, timer: 2000 });
        @endif

        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Gagal Menyimpan!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/alokasi-waktu/hari.blade.php`
```php
{{-- resources/views/admin/alokasi-waktu/hari.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Menu Hari')
@section('content')
<div class="container-fluid py-4">
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Manajemen Alokasi Waktu</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">Pilih jenjang pendidikan di bawah ini untuk mengelola daftar durasi jam pelajarannya.</p>
    </div>

    @include('admin.alokasi-waktu.layout-menu')

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0">Master Data Hari</h5>
            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addModal"><i class="bi bi-plus"></i> Tambah Hari</button>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr><th class="text-center" width="10%">NO</th><th>NAMA HARI</th><th width="15%" class="text-center">AKSI</th></tr>
                </thead>
                <tbody>
                    @forelse($haris as $item)
                    <tr>
                        <td class="text-center">{{ $loop->iteration }}</td>
                        <td class="fw-medium">{{ $item->nama_hari }}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ $item->id }}"><i class="bi bi-pencil"></i></button>
                            <form action="{{ route('admin.hari.destroy', $item->id) }}" method="POST" id="form-delete-{{ $item->id }}" class="d-inline">
                                @csrf @method('DELETE')
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete({{ $item->id }}, 'Hari {{ $item->nama_hari }}')"><i class="bi bi-trash"></i></button>
                            </form>
                        </td>
                    </tr>

                    <!-- Edit Modal -->
                    <div class="modal fade" id="editModal{{ $item->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <form action="{{ route('admin.hari.update', $item->id) }}" method="POST">
                                @csrf @method('PUT')
                                <div class="modal-content">
                                    <div class="modal-header"><h5 class="modal-title">Edit Hari</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                                    <div class="modal-body">
                                        <label class="form-label">Nama Hari</label>
                                        <input type="text" name="nama_hari" class="form-control" value="{{ $item->nama_hari }}" required>
                                    </div>
                                    <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan Perubahan</button></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @empty
                    <tr>
                        <td colspan="3" class="text-center py-4 text-muted">Belum ada data Hari.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.hari.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Tambah Hari</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <label class="form-label">Nama Hari</label>
                    <input type="text" name="nama_hari" class="form-control" required>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan</button></div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus ' + nama + '?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ 
                icon: 'success', 
                title: 'Berhasil!', 
                text: '{!! session('success') !!}', 
                showConfirmButton: false, 
                timer: 2000 
            });
        @endif

        @if($errors->any())
            Swal.fire({ 
                icon: 'error', 
                title: 'Gagal Menyimpan!', 
                html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' 
            });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/alokasi-waktu/layout-menu.blade.php`
```php
{{-- resources/views/admin/alokasi-waktu/layout-menu.blade.php --}}
<div class="d-flex gap-2 mb-4 overflow-auto pb-2">
    <a href="{{ route('admin.hari.index') }}" class="btn btn-sm {{ request()->routeIs('admin.hari.*') ? 'btn-primary shadow-sm' : 'btn-outline-primary' }}">
        <i class="bi bi-calendar-day"></i> Menu Hari
    </a>
    <a href="{{ route('admin.kategori-waktu.index') }}" class="btn btn-sm {{ request()->routeIs('admin.kategori-waktu.*') ? 'btn-primary shadow-sm' : 'btn-outline-primary' }}">
        <i class="bi bi-tags"></i> Menu Kategori
    </a>
    <a href="{{ route('admin.durasi-waktu.index') }}" class="btn btn-sm {{ request()->routeIs('admin.durasi-waktu.*') ? 'btn-primary shadow-sm' : 'btn-outline-primary' }}">
        <i class="bi bi-stopwatch"></i> Menu Waktu
    </a>
    <a href="{{ route('admin.alokasi-waktu.index') }}" class="btn btn-sm {{ request()->routeIs('admin.alokasi-waktu.*') ? 'btn-primary shadow-sm' : 'btn-outline-primary' }}">
        <i class="bi bi-diagram-3"></i> Menu Alokasi
    </a>
</div>
```

## File: `resources/views/admin/alokasi-waktu/waktu.blade.php`
```php
{{-- resources/views/admin/alokasi-waktu/waktu.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Menu Durasi Waktu')
@section('content')
<div class="container-fluid py-4">
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Manajemen Alokasi Waktu</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">Pilih jenjang pendidikan di bawah ini untuk mengelola daftar durasi jam pelajarannya.</p>
    </div>

    @include('admin.alokasi-waktu.layout-menu')

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0">Master Data Durasi Waktu</h5>
            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addModal"><i class="bi bi-plus"></i> Tambah Durasi</button>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr><th class="text-center" width="10%">NO</th><th>JAM MULAI</th><th>JAM SELESAI</th><th width="15%" class="text-center">AKSI</th></tr>
                </thead>
                <tbody>
                    @forelse($durasis as $item)
                    <tr>
                        <td class="text-center">{{ $loop->iteration }}</td>
                        <td class="fw-medium">{{ \Carbon\Carbon::parse($item->jam_mulai)->format('H:i') }}</td>
                        <td class="fw-medium">{{ \Carbon\Carbon::parse($item->jam_selesai)->format('H:i') }}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ $item->id }}"><i class="bi bi-pencil"></i></button>
                            <form action="{{ route('admin.durasi-waktu.destroy', $item->id) }}" method="POST" id="form-delete-{{ $item->id }}" class="d-inline">
                                @csrf @method('DELETE')
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete({{ $item->id }}, 'Durasi Waktu Ini')"><i class="bi bi-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                    
                    <!-- Edit Modal -->
                    <div class="modal fade" id="editModal{{ $item->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <form action="{{ route('admin.durasi-waktu.update', $item->id) }}" method="POST">
                                @csrf @method('PUT')
                                <div class="modal-content">
                                    <div class="modal-header"><h5 class="modal-title">Edit Durasi</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                                    <div class="modal-body">
                                        <label class="form-label">Jam Mulai</label>
                                        <input type="time" name="jam_mulai" class="form-control mb-2" value="{{ substr($item->jam_mulai, 0, 5) }}" required>
                                        <label class="form-label">Jam Selesai</label>
                                        <input type="time" name="jam_selesai" class="form-control" value="{{ substr($item->jam_selesai, 0, 5) }}" required>
                                    </div>
                                    <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan Perubahan</button></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center py-4 text-muted">Belum ada data Durasi Waktu.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.durasi-waktu.store') }}" method="POST">
  
```

## File: `resources/views/admin/alokasi-waktu/kategori.blade.php`
```php
{{-- resources/views/admin/alokasi-waktu/kategori.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Menu Kategori')
@section('content')
<div class="container-fluid py-4">
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Manajemen Alokasi Waktu</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">Pilih jenjang pendidikan di bawah ini untuk mengelola daftar durasi jam pelajarannya.</p>
    </div>

    @include('admin.alokasi-waktu.layout-menu')

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0">Master Data Kategori Waktu</h5>
            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addModal"><i class="bi bi-plus"></i> Tambah Kategori</button>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr><th class="text-center" width="10%">NO</th><th>NAMA KATEGORI</th><th width="15%" class="text-center">AKSI</th></tr>
                </thead>
                <tbody>
                    @forelse($kategoris as $item)
                    <tr>
                        <td class="text-center">{{ $loop->iteration }}</td>
                        <td class="fw-medium">{{ $item->nama_kategori }}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ $item->id }}"><i class="bi bi-pencil"></i></button>
                            <form action="{{ route('admin.kategori-waktu.destroy', $item->id) }}" method="POST" id="form-delete-{{ $item->id }}" class="d-inline">
                                @csrf @method('DELETE')
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete({{ $item->id }}, 'Kategori {{ $item->nama_kategori }}')"><i class="bi bi-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                    
                    <!-- Edit Modal -->
                    <div class="modal fade" id="editModal{{ $item->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <form action="{{ route('admin.kategori-waktu.update', $item->id) }}" method="POST">
                                @csrf @method('PUT')
                                <div class="modal-content">
                                    <div class="modal-header"><h5 class="modal-title">Edit Kategori</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                                    <div class="modal-body">
                                        <label class="form-label">Nama Kategori</label>
                                        <input type="text" name="nama_kategori" class="form-control" value="{{ $item->nama_kategori }}" required>
                                    </div>
                                    <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan Perubahan</button></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @empty
                    <tr>
                        <td colspan="3" class="text-center py-4 text-muted">Belum ada data Kategori Waktu.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.kategori-waktu.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Tambah Kategori</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <label class="form-label">Nama Kategori</label>
                    <input type="text" name="nama_kategori" class="form-control" required>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan</button></div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus ' + nama + '?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ 
                icon: 'success', 
                title: 'Berhasil!', 
                text: '{!! session('success') !!}', 
                showConfirmButton: false, 
                timer: 2000 
            });
        @endif

        @if($errors->any())
            Swal.fire({ 
                icon: 'error', 
                title: 'Gagal Menyimpan!', 
                html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' 
            });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/ppdb/create.blade.php`
```php
{{-- resources/views/admin/ppdb/create.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Tambah Pendaftar PPDB')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Pendaftaran Siswa Baru (PPDB)</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Masukkan data akademik dan identitas dasar calon siswa.</p>
        </div>
        <a href="{{ route('admin.ppdb') }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <form action="{{ route('admin.ppdb.store') }}" method="POST">
                @csrf
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white pt-3 pb-2 border-bottom">
                        <h6 class="fw-bold text-primary mb-0"><i class="bi bi-person-badge me-2"></i>Formulir Pendaftaran PPDB</h6>
                    </div>
                    
                    <div class="card-body p-4">
                        @if($errors->any())
                            <div class="alert alert-danger shadow-sm border-0">
                                <ul class="mb-0 fw-medium">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="p-3 bg-light rounded border mb-4">
                            <h6 class="fw-bold mb-3 text-success border-bottom border-success pb-2 d-inline-block">Rencana Penempatan Kelas</h6>
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">1. Jenjang Pendidikan <span class="text-danger">*</span></label>
                                    <select id="jenjang_select" class="form-select" required>
                                        <option value="">-- Pilih Jenjang --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">2. Tingkat Kelas <span class="text-danger">*</span></label>
                                    <select id="tingkat_select" class="form-select" required disabled>
                                        <option value="">-- Pilih Tingkat --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">3. Ruang Kelas <span class="text-danger">*</span></label>
                                    <select id="kelas_select" name="kelas_id" class="form-select" required disabled>
                                        <option value="">-- Pilih Ruang Kelas --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">4. Gender Kelas</label>
                                    <select id="gender_kelas_select" class="form-select border-success" disabled>
                                        <option value="">-- Otomatis --</option>
                                    </select>
                                    <div class="form-text" style="font-size: 12px;">Kategori ruang / slot kelas.</div>
                                </div>
                            </div>
                        </div>

                        <div class="p-3 bg-light rounded border mb-4 border-primary" style="--bs-border-opacity: .2;">
                            <h6 class="fw-bold mb-3 text-primary border-bottom border-primary pb-2 d-inline-block">Periode & Registrasi PPDB</h6>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">1. Tahun PPDB <span class="text-danger">*</span></label>
                                    <select id="tahun_ppdb_select" class="form-select" required>
                                        <option value="">-- Pilih Tahun PPDB --</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">2. Tahun Ajaran <span class="text-danger">*</span></label>
                                    <select id="tahun_ajaran_select" name="tahun_ajaran_id" class="form-select" required disabled>
                                        <option value="">-- Pilih Tahun Ajaran --</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">3. Registrasi PPDB</label>
                                    <input type="text" id="no_pendaftaran_input" class="form-control fw-bold text-primary bg-white" readonly placeholder="Otomatis (Contoh: PPDB4701001)">
                                    <div class="form-text" style="font-size: 12px;">Dibuat otomatis dari kombinasi Periode Hijriyah dan Kode Jenjang.</div>
                                </div>
                            </div>
                        </div>

                        <h6 class="fw-bold mb-3 text-primary border-bottom pb-2">Identitas Dasar Calon Siswa</h6>
                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label fw-medium">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" name="nama_lengkap" class="form-control" required value="{{ old('nama_lengkap') }}" placeholder="Sesuai Akta Kelahiran / Ijazah">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Tempat Lahir</label>
                                <input type="text" name="tempat_lahir" class="form-control" value="{{ old('tempat_lahir') }}" placeholder="Contoh: Cirebon">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Tanggal Lahir</label>
                                <input type="date" name="tanggal_lahir" class="form-control" value="{{ old('tanggal_lahir') }}" max="{{ date('Y-m-d') }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Gender <span class="text-danger">*</span></label>
                                <select id="biodata_gender_select" name="jenis_kelamin" class="form-select" required>
                                    <option value="">-- Pilih Gender --</option>
                                    @foreach($genders as $gender)
                                        @php
                                            $valDB = 'L';
                                            $lowerGender = strtolower($gender->nama_gender);
                                            if (str_contains($lowerGender, 'perempuan') || str_contains($lowerGender, 'wanita') || str_contains($lowerGender, 'putri') || str_contains($lowerGender, 'banat') || $lowerGender === 'p') {
                                                $valDB = 'P';
                                            }
                                        @endphp
                                        <option value="{{ $valDB }}" {{ old('jenis_kelamin') == $valDB ? 'selected' : '' }}>
                                            {{ $gender->nama_gender }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Agama</label>
                                <input type="text" name="agama" class="form-control bg-light" value="Islam" readonly>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Jenis Pendaftaran</label>
                                <select name="jenis_pendaftaran" class="form-select">
                                    <option value="Baru" {{ old('jenis_pendaftaran') == 'Baru' ? 'selected' : '' }}>Siswa Baru</option>
                                    <option value="Pindahan" {{ old('jenis_pendaftaran') == 'Pindahan' ? 'selected' : '' }}>Pindahan</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">NISN</label>
                                <input type="text" inputmode="numeric" name="nisn" class="form-control" value="{{ old('nisn') }}" placeholder="10 Digit Nomor Induk Nasional">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Asal Sekolah</label>
                                <input type="text" name="asal_sekolah" class="form-control" value="{{ old('asal_sekolah') }}" placeholder="Contoh: SMPN 1 Kuningan">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">No. HP / WA Calon Siswa</label>
                                <input type="text" name="no_hp" class="form-control" value="{{ old('no_hp') }}" placeholder="Nomor aktif">
                            </div>
                        </div>

                    </div>
                    <div class="card-footer bg-light p-3 text-end">
                        <button type="submit" class="btn btn-primary px-4 fw-bold shadow-sm">
                            <i class="bi bi-save me-1"></i> Simpan Pendaftaran Baru
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const dataKelasRaw = @json($kelas);
    const dataTahunRaw = @json($tahunAjarans);

    const tahunPpdbSelect = document.getElementById('tahun_ppdb_select');
    const tahunAjaranSelect = document.getElementById('tahun_ajaran_select');
    const noPendaftaranInput = document.getElementById('no_pendaftaran_input');

    const jenjangSelect = document.getElementById('jenjang_select');
    const tingkatSelect = document.getElementById('tingkat_select');
    const kelasSelect = document.getElementById('kelas_select');
    const genderKelasSelect = document.getElementById('gender_kelas_select');
    const biodataGenderSelect = document.getElementById('biodata_gender_select');

    function hitungNoPendaftaranOtomatis() {
        const tahunAjaranId = tahunAjaranSelect.value;
        const jenjangId = jenjangSelect.value;

        if (tahunAjaranId && jenjangId) {
            fetch(`/admin/ppdb/get-no-pendaftaran/${tahunAjaranId}/${jenjangId}`)
                .then(response => response.json())
                .then(res => {
                    if (res.success) {
                        noPendaftaranInput.value = res.no_pendaftaran;
                    }
                })
                .catch(err => {
                    console.error("Gagal memuat nomor registrasi otomatis:", err);
                });
        } else {
            noPendaftaranInput.value = '';
        }
    }

    const tahunPpdbMap = new Map();
    dataTahunRaw.forEach(item => {
        if(item.tahun_ppdb && item.tahun_ppdb_hijriyah) {
            tahunPpdbMap.set(item.tahun_ppdb, item.tahun_ppdb_hijriyah);
        }
    });
    
    const sortedTahunPpdb = Array.from(tahunPpdbMap.entries()).sort((a, b) => b[0].toString().localeCompare(a[0].toString()));
    
    sortedTahunPpdb.forEach(([masehi, hijriyah]) => {
        tahunPpdbSelect.add(new Option(`${hijriyah} H [${masehi} M]`, masehi));
    });

    tahunPpdbSelect.addEventListener('change', function() {
        tahunAjaranSelect.innerHTML = '<option value="">-- Pilih Tahun Ajaran --</option>';
        tahunAjaranSelect.disabled = true;
        noPendaftaranInput.value = '';

        if (this.value) {
            const filteredTa = dataTahunRaw.filter(item => item.tahun_ppdb == this.value);
            filteredTa.forEach(item => {
                let labelText = `${item.tahun_ajaran_hijriyah} H [${item.tahun_ajaran} M]`;
                if(item.status_ppdb === 'buka') labelText += ' (BUKA)';
                
                tahunAjaranSelect.add(new Option(labelText, item.id));
            });
            tahunAjaranSelect.disabled = false;
        }
    });

    tahunAjaranSelect.addEventListener('change', hitungNoPendaftaranOtomatis);
    jenjangSelect.addEventListener('change', hitungNoPendaftaranOtomatis);

    const jenjangUnik = {};
    dataKelasRaw.forEach(k => {
        if (k.tingkat && k.tingkat.jenjang) {
            jenjangUnik[k.tingkat.jenjang.id] = k.tingkat.jenjang.nama_jenjang;
        }
    });
    for (const [id, nama] of Object.entries(jenjangUnik)) {
        jenjangSelect.add(new Option(nama, id));
    }

    jenjangSelect.addEventListener('change', function () {
        tingkatSelect.innerHTML = '<option value="">-- Pilih Tingkat --</option>';
        kelasSelect.innerHTML = '<option value="">-- Pilih Ruang Kelas --</option>';
        genderKelasSelect.innerHTML = '<option value="">-- Otomatis --</option>';
        tingkatSelect.disabled = true; kelasSelect.disabled = true; genderKelasSelect.disabled = true;

        if (this.value) {
            const tingkatUnik = {};
            dataKelasRaw.forEach(k => {
                if (k.tingkat && k.tingkat.jenjang && k.tingkat.jenjang.id == this.value) {
                    tingkatUnik[k.tingkat.id] = k.tingkat.nama_tingkat;
                }
            });
            for (const [id, nama] of Object.entries(tingkatUnik)) {
                tingkatSelect.add(new Option(nama, id));
            }
             tingkatSelect.disabled = false;
        }
    });

    tingkatSelect.addEventListener('change', function () {
        kelasSelect.innerHTML = '<option value="">-- Pilih Ruang Kelas --</option>';
        genderKelasSelect.innerHTML = '<option value="">-- Otomatis --</option>';
        kelasSelect.disabled = true; genderKelasSelect.disabled = true;

        if (this.value) {
            dataKelasRaw.forEach(k => {
                if (k.tingkat && k.tingkat.id == this.value) {
                    kelasSelect.add(new Option(k.nama_kelas, k.id));
                }
            });
            kelasSelect.disabled = false;
        }
    });

    kelasSelect.addEventListener('change', function () {
        genderKelasSelect.innerHTML = '<option value="">-- Pilih Gender Kelas --</option>';
        genderKelasSelect.disabled = true;

        if (this.value) {
            const kelasTerpilih = dataKelasRaw.find(k => k.id == this.value);

            if (kelasTerpilih) {
                if (!kelasTerpilih.details || kelasTerpilih.details.length === 0) {
                    genderKelasSelect.add(new Option('Kelas Campuran', 'campuran'));
                    genderKelasSelect.value = 'campuran'; 
                    genderKelasSelect.disabled = true;
                    biodataGenderSelect.value = '';
                    biodataGenderSelect.disabled = false;
                } 
                else {
                    kelasTerpilih.details.forEach(dtl => {
                        if (dtl.gender) {
                            let namaGender = dtl.gender.nama_gender;
                            let kapasitasText = dtl.kapasitas ? ` [Sisa Kuota: ${dtl.kapasitas}]` : '';
                            let valueDatabase = 'L';
                            let lowerGender = namaGender.toLowerCase();
                            if (lowerGender.includes('perempuan') || lowerGender.includes('wanita') || lowerGender.includes('putri') || lowerGender.includes('banat') || lowerGender === 'p') {
                                valueDatabase = 'P';
                            }
                            genderKelasSelect.add(new Option(`${namaGender}${kapasitasText}`, valueDatabase));
                        }
                    });
                    genderKelasSelect.disabled = false;
                }
            }
        }
    });

    genderKelasSelect.addEventListener('change', function () {
        if (this.value && this.value !== 'campuran') {
            biodataGenderSelect.value = this.value;
            biodataGenderSelect.classList.add('border-success', 'border-2');
            setTimeout(() => { 
                biodataGenderSelect.classList.remove('border-success', 'border-2'); 
            }, 1500);
        }
    });
});
</script>
@endpush
@endsection
```

## File: `resources/views/admin/ppdb/index.blade.php`
```php
{{-- resources/views/admin/ppdb/index.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Data PPDB')

@push('styles')
<style>
    .nav-pills .nav-link {
        transition: all 0.3s ease;
    }
    .nav-pills .nav-link .badge {
        background-color: #6c757d !important;
        color: #fff !important;
        transition: all 0.3s ease;
    }
    .nav-pills .nav-link.active .badge {
        background-color: #ffffff !important;
        color: #0d6efd !important; 
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Penerimaan Peserta Didik Baru (PPDB)</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola data pendaftaran siswa baru madrasah.</p>
        </div>
        <a href="{{ route('admin.ppdb.create') }}" class="btn btn-primary btn-sm d-flex align-items-center gap-2 shadow-sm">
            <i class="bi bi-plus-circle"></i> Tambah Pendaftar
        </a>
    </div>

    @php
        $semuaJenjang = \App\Models\JenjangKelas::orderBy('id', 'asc')->get();
        $tabData = ['semua' => ['label' => 'Semua Pendaftar', 'data' => $ppdbs]];

        foreach($semuaJenjang as $j) {
            $tabData['jenjang_' . $j->id] = [
                'label' => $j->nama_jenjang,
                'data' => $ppdbs->filter(fn($p) => $p->jenjang_id == $j->id)
            ];
        }
    @endphp

    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex" role="tablist">
            @foreach($tabData as $key => $tab)
                <li class="nav-item flex-fill text-center" role="presentation">
                    <button class="nav-link w-100 mb-0 px-0 py-2 {{ $loop->first ? 'active fw-bold shadow-sm' : 'text-dark hover-bg-light' }}" 
                            id="tab-{{ $key }}" data-bs-toggle="tab" data-bs-target="#pane-{{ $key }}" type="button" role="tab"
                            style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-person-lines-fill me-1"></i> {{ $tab['label'] }} 
                        <span class="badge ms-1 rounded-pill">{{ $tab['data']->count() }}</span>
                    </button>
                </li>
            @endforeach
        </ul>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white pt-3 pb-2 border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
            <h6 class="fw-bold text-dark mb-0"><i class="bi bi-card-list me-2"></i>Daftar Calon Siswa</h6>
            <form action="{{ route('admin.ppdb') }}" method="GET" class="d-flex" style="max-width: 320px; width: 100%;">
                <div class="input-group input-group-sm">
                    <input type="text" name="search" class="form-control" placeholder="Cari No. Daftar / Nama..." value="{{ request('search') }}">
                    <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i></button>
                    @if(request('search'))
                        <a href="{{ route('admin.ppdb') }}" class="btn btn-outline-secondary" title="Reset Pencarian"><i class="bi bi-x-circle"></i></a>
                    @endif
                </div>
            </form>
        </div>

        <div class="card-body p-0">
            <div class="tab-content" id="ppdbTabsContent">
                @foreach($tabData as $key => $tab)
                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="pane-{{ $key }}" role="tabpanel">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-3 text-secondary" style="font-size: 12px;" width="5%">NO</th>
                                        <th class="text-secondary" style="font-size: 12px;">NO. DAFTAR</th>
                                        <th class="text-secondary" style="font-size: 12px;">TAHUN PPDB</th>
                                        <th class="text-secondary" style="font-size: 12px;">TAHUN AJARAN</th>
                                        <th class="text-secondary" style="font-size: 12px;">NAMA LENGKAP</th>
                                        <th class="text-secondary" style="font-size: 12px;">ASAL SEKOLAH</th>
                                        <th class="text-secondary" style="font-size: 12px;">TANGGAL DAFTAR</th>
                                        <th class="text-center text-secondary" style="font-size: 12px;" width="15%">STATUS</th>
                                        <th class="text-center text-secondary" style="font-size: 12px;" width="12%">AKSI</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($tab['data'] as $p)
                                    <tr>
                                        <td class="ps-3 text-muted fw-medium">
                                            {{ ($ppdbs->currentPage() - 1) * $ppdbs->perPage() + $loop->iteration }}
                                        </td>
                                        <td class="fw-bold text-primary">{{ $p->no_pendaftaran }}</td>
                                        <td>
                                            @if($p->tahunAjaran)
                                                <span class="d-block fw-bold text-dark">{{ $p->tahunAjaran->tahun_ppdb_hijriyah ?? '-' }} H</span>
                                                <small class="text-muted">{{ $p->tahunAjaran->tahun_ppdb ?? '-' }} M</small>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($p->tahunAjaran)
                                                <span class="d-block fw-medium text-dark">{{ $p->tahunAjaran->tahun_ajaran_hijriyah ?? '-' }} H</span>
                                                <small class="text-muted">{{ $p->tahunAjaran->tahun_ajaran ?? '-' }} M</small>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="fw-bold">{{ $p->nama_lengkap }} <br><small class="text-muted fw-normal">NISN: {{ $p->nisn ?? '-' }}</small></td>
                                        <td>{{ $p->asal_sekolah ?? '-' }}</td>
                                        <td>
                                            <span class="d-block fw-bold text-dark">{{ $p->tanggal_daftar_hijriyah }}</span>
                                            <small class="text-muted">{{ \Carbon\Carbon::parse($p->tanggal_daftar)->format('d M Y') }} M</small>
                                        </td>
                                        <td class="text-center">
                                            <form action="{{ route('admin.ppdb.update', $p->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('PUT')
                                                <input type="hidden" name="tahun_ajaran_id" value="{{ $p->tahun_ajaran_id }}">
                                                <input type="hidden" name="nama_lengkap" value="{{ $p->nama_lengkap }}">
                                                <input type="hidden" name="kelas_id" value="{{ $p->kelas_id }}">
                                                <input type="hidden" name="jenis_kelamin" value="{{ $p->jenis_kelamin }}">
                                                <input type="hidden" name="nisn" value="{{ $p->nisn }}">
                                                <input type="hidden" name="tanggal_lahir" value="{{ $p->tanggal_lahir }}">
                                                
                                                <select name="status" class="form-select form-select-sm text-center fw-bold rounded-pill shadow-sm py-1 border-0
                                                    {{ $p->status == 'Verifikasi' ? 'bg-warning text-dark' : '' }}
                                                    {{ $p->status == 'Diterima' ? 'bg-success text-white' : '' }}
                                                    {{ $p->status == 'Ditolak' ? 'bg-danger text-white' : '' }}
                                                    {{ $p->status == 'Cabut Berkas' ? 'bg-secondary text-white' : '' }}"
                                                    onchange="this.form.submit()" style="font-size: 13px; cursor: pointer; min-width: 130px;">
                                                    <option value="Verifikasi" {{ $p->status == 'Verifikasi' ? 'selected' : '' }}>🟡 Verifikasi</option>
                                                    <option value="Diterima" {{ $p->status == 'Diterima' ? 'selected' : '' }}>🟢 Diterima</option>
                                                    <option value="Ditolak" {{ $p->status == 'Ditolak' ? 'selected' : '' }}>🔴 Ditolak</option>
                                                    <option value="Cabut Berkas" {{ $p->status == 'Cabut Berkas' ? 'selected' : '' }}>⚪ Cabut Berkas</option>
                                                </select>
                                            </form>
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex justify-content-center gap-1">
                                                <a href="{{ route('admin.ppdb.edit', $p->id) }}" class="btn btn-sm btn-outline-primary" title="Edit Data">
                                                    <i class="bi bi-pencil-square"></i>
                                                </a>
                                                <button type="button" class="btn btn-sm btn-outline-danger" title="Hapus Data" onclick="confirmDelete({{ $p->id }}, '{{ addslashes($p->nama_lengkap) }}')">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                                <form id="delete-form-{{ $p->id }}" action="{{ route('admin.ppdb.destroy', $p->id) }}" method="POST" class="d-none">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-5 text-muted">
                                            <i class="bi bi-person-x fs-1 d-block mb-2 text-black-50"></i>
                                            Belum ada data pendaftar PPDB untuk kategori ini.
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card-footer bg-white border-top py-3">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <small class="text-muted fw-medium">
                    Menampilkan {{ $ppdbs->firstItem() ?? 0 }} - {{ $ppdbs->lastItem() ?? 0 }} dari {{ $ppdbs->total() }} data pendaftar
                </small>
                <div>
                    {{ $ppdbs->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus Pendaftar?',
            text: "Data registrasi atas nama '" + nama + "' akan dihapus permanen!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session("success") }}', showConfirmButton: false, timer: 2000 });
        @endif
    });
</script>
@endpush
```

## File: `resources/views/admin/ppdb/edit.blade.php`
```php
{{-- resources/views/admin/ppdb/edit.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Edit Pendaftar PPDB')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Edit Pendaftaran: {{ $ppdb->nama_lengkap }}</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Nomor Pendaftaran: <strong>{{ $ppdb->no_pendaftaran }}</strong></p>
        </div>
        <a href="{{ route('admin.ppdb') }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="row">
        <div class="col-12">
            <form action="{{ route('admin.ppdb.update', $ppdb->id) }}" method="POST">
                @csrf
                @method('PUT')
                
                <input type="hidden" name="status" value="{{ $ppdb->status }}">

                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white pt-3 pb-2 border-bottom">
                        <h6 class="fw-bold text-primary mb-0"><i class="bi bi-pencil-square me-2"></i>Edit Data Pendaftaran</h6>
                    </div>
                    
                    <div class="card-body p-4">
                        @if($errors->any())
                            <div class="alert alert-danger shadow-sm border-0">
                                <ul class="mb-0 fw-medium">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="p-3 bg-light rounded border mb-4">
                            <h6 class="fw-bold mb-3 text-success border-bottom border-success pb-2 d-inline-block">Rencana Penempatan Kelas</h6>
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">1. Jenjang Pendidikan <span class="text-danger">*</span></label>
                                    <select id="jenjang_select" class="form-select" required>
                                        <option value="">-- Pilih Jenjang --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">2. Tingkat Kelas <span class="text-danger">*</span></label>
                                    <select id="tingkat_select" class="form-select" required>
                                        <option value="">-- Pilih Tingkat --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">3. Ruang Kelas <span class="text-danger">*</span></label>
                                    <select id="kelas_select" name="kelas_id" class="form-select" required>
                                        <option value="">-- Pilih Ruang Kelas --</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label fw-medium">4. Gender Kelas</label>
                                    <select id="gender_kelas_select" class="form-select border-success">
                                        <option value="">-- Otomatis --</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="p-3 bg-light rounded border mb-4 border-primary" style="--bs-border-opacity: .2;">
                            <h6 class="fw-bold mb-3 text-primary border-bottom border-primary pb-2 d-inline-block">Periode & Registrasi PPDB</h6>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">1. Tahun PPDB <span class="text-danger">*</span></label>
                                    <select id="tahun_ppdb_select" class="form-select" required>
                                        <option value="">-- Pilih Tahun PPDB --</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">2. Tahun Ajaran <span class="text-danger">*</span></label>
                                    <select id="tahun_ajaran_select" name="tahun_ajaran_id" class="form-select" required>
                                        <option value="">-- Pilih Tahun Ajaran --</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label fw-medium">3. Registrasi PPDB</label>
                                    <input type="text" id="no_pendaftaran_input" name="no_pendaftaran" class="form-control fw-bold text-primary bg-white" readonly value="{{ $ppdb->no_pendaftaran }}">
                                </div>
                            </div>
                        </div>

                        <h6 class="fw-bold mb-3 text-primary border-bottom pb-2">Identitas Dasar Calon Siswa</h6>
                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label fw-medium">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" name="nama_lengkap" class="form-control" required value="{{ old('nama_lengkap', $ppdb->nama_lengkap) }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Tempat Lahir</label>
                                <input type="text" name="tempat_lahir" class="form-control" value="{{ old('tempat_lahir', $ppdb->tempat_lahir) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Tanggal Lahir</label>
                                <input type="date" name="tanggal_lahir" class="form-control" value="{{ old('tanggal_lahir', $ppdb->tanggal_lahir) }}" max="{{ date('Y-m-d') }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Gender <span class="text-danger">*</span></label>
                                <select id="biodata_gender_select" name="jenis_kelamin" class="form-select" required>
                                    <option value="">-- Pilih Gender --</option>
                                    @foreach($genders as $gender)
                                        @php
                                            $valDB = 'L';
                                            $lowerGender = strtolower($gender->nama_gender);
                                            if (str_contains($lowerGender, 'perempuan') || str_contains($lowerGender, 'wanita') || str_contains($lowerGender, 'p')) $valDB = 'P';
                                        @endphp
                                        <option value="{{ $valDB }}" {{ old('jenis_kelamin', $ppdb->jenis_kelamin) == $valDB ? 'selected' : '' }}>
                                            {{ $gender->nama_gender }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Agama</label>
                                <input type="text" name="agama" class="form-control bg-light" value="{{ $ppdb->agama }}" readonly>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Jenis Pendaftaran</label>
                                <select name="jenis_pendaftaran" class="form-select">
                                    <option value="Baru" {{ old('jenis_pendaftaran', $ppdb->jenis_pendaftaran) == 'Baru' ? 'selected' : '' }}>Siswa Baru</option>
                                    <option value="Pindahan" {{ old('jenis_pendaftaran', $ppdb->jenis_pendaftaran) == 'Pindahan' ? 'selected' : '' }}>Pindahan</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">NISN</label>
                                <input type="text" inputmode="numeric" name="nisn" class="form-control" value="{{ old('nisn', $ppdb->nisn) }}">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-medium">Asal Sekolah</label>
                                <input type="text" name="asal_sekolah" class="form-control" value="{{ old('asal_sekolah', $ppdb->asal_sekolah) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium">No. HP / WA Calon Siswa</label>
                                <input type="text" name="no_hp" class="form-control" value="{{ old('no_hp', $ppdb->no_hp) }}">
                            </div>
                        </div>

                    </div>
                    <div class="card-footer bg-light p-3 text-end">
                        <button type="submit" class="btn btn-success px-4 fw-bold shadow-sm">
                            <i class="bi bi-save me-1"></i> Simpan Perubahan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const dataKelasRaw = @json($kelas);
    const dataTahunRaw = @json($tahunAjarans);

    const savedKelasId = "{{ old('kelas_id', $ppdb->kelas_id) }}";
    const savedJenisKelamin = "{{ old('jenis_kelamin', $ppdb->jenis_kelamin) }}";
    const savedTahunAjaranId = "{{ old('tahun_ajaran_id', $ppdb->tahun_ajaran_id) }}";

    let savedTingkatId = "";
    let savedJenjangId = "";
    let savedTahunPpdb = "";

    if (savedKelasId) {
        const k = dataKelasRaw.find(x => x.id == savedKelasId);
        if (k && k.tingkat) {
            savedTingkatId = k.tingkat.id;
            if (k.tingkat.jenjang) savedJenjangId = k.tingkat.jenjang.id;
        }
    }

    if (savedTahunAjaranId) {
        const t = dataTahunRaw.find(x => x.id == savedTahunAjaranId);
        if (t) savedTahunPpdb = t.tahun_ppdb;
    }

    const tahunPpdbSelect = document.getElementById('tahun_ppdb_select');
    const tahunAjaranSelect = document.getElementById('tahun_ajaran_select');
    const noPendaftaranInput = document.getElementById('no_pendaftaran_input');

    const jenjangSelect = document.getElementById('jenjang_select');
    const tingkatSelect = document.getElementById('tingkat_select');
    const kelasSelect = document.getElementById('kelas_select');
    const genderKelasSelect = document.getElementById('gender_kelas_select');
    const biodataGenderSelect = document.getElementById('biodata_gender_select');

    function hitungNoPendaftaranOtomatis() {
        const tahunAjaranId = tahunAjaranSelect.value;
        const jenjangId = jenjangSelect.value;

        if (tahunAjaranId == savedTahunAjaranId && jenjangId == savedJenjangId) {
            noPendaftaranInput.value = "{{ $ppdb->no_pendaftaran }}";
        } else if (tahunAjaranId && jenjangId) {
            fetch(`{{ url('admin/ppdb/get-no-pendaftaran') }}/${tahunAjaranId}/${jenjangId}`)
                .then(response => response.json())
                .then(res => { if (res.success) noPendaftaranInput.value = res.no_pendaftaran; });
        } else {
            noPendaftaranInput.value = '';
        }
    }

    const tahunPpdbMap = new Map();
    dataTahunRaw.forEach(item => { 
        if(item.tahun_ppdb && item.tahun_ppdb_hijriyah) {
            tahunPpdbMap.set(item.tahun_ppdb, item.tahun_ppdb_hijriyah); 
        }
    });

    const sortedTahunPpdb = Array.from(tahunPpdbMap.entries()).sort((a, b) => b[0].toString().localeCompare(a[0].toString()));
    sortedTahunPpdb.forEach(([masehi, hijriyah]) => {
        tahunPpdbSelect.add(new Option(`${hijriyah} H [${masehi} M]`, masehi));
    });

    function loadTahunAjaran(tahunPpdb, isInit = false) {
        tahunAjaranSelect.innerHTML = '<option value="">-- Pilih Tahun Ajaran --</option>';
        tahunAjaranSelect.disabled = true;
        if(!isInit) noPendaftaranInput.value = '';

        if (tahunPpdb) {
            const filteredTa = dataTahunRaw.filter(item => item.tahun_ppdb == tahunPpdb);
            filteredTa.forEach(item => {
                let labelText = `${item.tahun_ajaran_hijriyah} H [${item.tahun_ajaran} M]`;
                if(item.status_ppdb === 'buka') labelText += ' (BUKA)';
                tahunAjaranSelect.add(new Option(labelText, item.id));
            });
            tahunAjaranSelect.disabled = false;
        }
    }

    tahunPpdbSelect.addEventListener('change', function() { loadTahunAjaran(this.value, false); });
    tahunAjaranSelect.addEventListener('change', hitungNoPendaftaranOtomatis);
    jenjangSelect.addEventListener('change', hitungNoPendaftaranOtomatis);

    const jenjangUnik = {};
    dataKelasRaw.forEach(k => {
        if (k.tingkat && k.tingkat.jenjang) jenjangUnik[k.tingkat.jenjang.id] = k.tingkat.jenjang.nama_jenjang;
    });
    for (const [id, nama] of Object.entries(jenjangUnik)) { jenjangSelect.add(new Option(nama, id)); }

    function loadTingkat(jenjangId) {
        tingkatSelect.innerHTML = '<option value="">-- Pilih Tingkat --</option>';
        kelasSelect.innerHTML = '<option value="">-- Pilih Ruang Kelas --</option>';
        genderKelasSelect.innerHTML = '<option value="">-- Otomatis --</option>';
        tingkatSelect.disabled = true; kelasSelect.disabled = true; genderKelasSelect.disabled = true;

        if (jenjangId) {
            const tingkatUnik = {};
            dataKelasRaw.forEach(k => {
                if (k.tingkat && k.tingkat.jenjang && k.tingkat.jenjang.id == jenjangId) tingkatUnik[k.tingkat.id] = k.tingkat.nama_tingkat;
            });
            for (const [id, nama] of Object.entries(tingkatUnik)) { tingkatSelect.add(new Option(nama, id)); }
            tingkatSelect.disabled = false;
        }
    }

    function loadKelas(tingkatId) {
        kelasSelect.innerHTML = '<option value="">-- Pilih Ruang Kelas --</option>';
        genderKelasSelect.innerHTML = '<option value="">-- Otomatis --</option>';
        kelasSelect.disabled = true; genderKelasSelect.disabled = true;

        if (tingkatId) {
            dataKelasRaw.forEach(k => {
                if (k.tingkat && k.tingkat.id == tingkatId) kelasSelect.add(new Option(k.nama_kelas, k.id));
            });
            kelasSelect.disabled = false;
        }
    }

    function loadGenderKelas(kelasId, isInit = false) {
        genderKelasSelect.innerHTML = '<option value="">-- Pilih Gender Kelas --</option>';
        genderKelasSelect.disabled = true;

        if (kelasId) {
            const kelasTerpilih = dataKelasRaw.find(k => k.id == kelasId);
            if (kelasTerpilih) {
                if (!kelasTerpilih.details || kelasTerpilih.details.length === 0) {
                    genderKelasSelect.add(new Option('Kelas Campuran', 'campuran'));
                    genderKelasSelect.value = 'campuran';
                    genderKelasSelect.disabled = true;
                } else {
                    kelasTerpilih.details.forEach(dtl => {
                        if (dtl.gender) {
                            let namaGender = dtl.gender.nama_gender;
                            let kapasitasText = dtl.kapasitas ? ` [Sisa: ${dtl.kapasitas}]` : '';
                            let valueDatabase = 'L';
                            let lowerGender = namaGender.toLowerCase();
                            if (lowerGender.includes('perempuan') || lowerGender.includes('wanita') || lowerGender.includes('p')) valueDatabase = 'P';
                            genderKelasSelect.add(new Option(`${namaGender}${kapasitasText}`, valueDatabase));
                        }
                    });
                    genderKelasSelect.disabled = false;

                    if(isInit && savedKelasId == kelasId) {
                        for(let i=0; i < genderKelasSelect.options.length; i++){
                            if(genderKelasSelect.options[i].value == savedJenisKelamin) {
                                genderKelasSelect.selectedIndex = i;
                                break;
                            }
                        }
                    }
                }
            }
        }
    }

    jenjangSelect.addEventListener('change', function () { loadTingkat(this.value); });
    tingkatSelect.addEventListener('change', function () { loadKelas(this.value); });
    kelasSelect.addEventListener('change', function () { loadGenderKelas(this.value, false); });

    if (savedTahunPpdb) {
        tahunPpdbSelect.value = savedTahunPpdb;
        loadTahunAjaran(savedTahunPpdb, true);
        if (savedTahunAjaranId) tahunAjaranSelect.value = savedTahunAjaranId;
    }

    if (savedJenjangId) {
        jenjangSelect.value = savedJenjangId;
        loadTingkat(savedJenjangId);
        if (savedTingkatId) {
            tingkatSelect.value = savedTingkatId;
            loadKelas(savedTingkatId);
            if (savedKelasId) {
                kelasSelect.value = savedKelasId;
                loadGenderKelas(savedKelasId, true);
            }
        }
    }
});
</script>
@endpush
@endsection
```

## File: `resources/views/admin/ppdb/pengaturan.blade.php`
```php
{{-- resources/views/admin/ppdb/pengaturan.blade.php --}}
@extends('admin.layouts.app') 
@section('title', 'Pengaturan Landing PPDB')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Pengaturan Halaman PPDB</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Ubah teks sambutan, jadwal, dan unggah brosur di sini.</p>
        </div>
        <a href="{{ route('admin.ppdb') }}" class="btn btn-secondary btn-sm shadow-sm"><i class="bi bi-arrow-left"></i> Kembali ke Data Pendaftar</a>
    </div>

    @if(session('success')) <div class="alert alert-success border-0 shadow-sm"><i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}</div> @endif
    @if($errors->any()) <div class="alert alert-danger border-0 shadow-sm"><ul class="mb-0">@foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach</ul></div> @endif

    <form action="{{ route('admin.ppdb.pengaturan.update') }}" method="POST" enctype="multipart/form-data">
        @csrf @method('PUT')
        
        <div class="row g-4">
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm h-100 border-top border-primary" style="border-top-width: 4px !important;">
                    <div class="card-header bg-white"><h6 class="fw-bold mb-0">Informasi Utama & Media</h6></div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Judul Utama</label>
                            <input type="text" name="judul" class="form-control" value="{{ old('judul', $setting->judul) }}" required>
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-bold">Deskripsi Sambutan</label>
                            <textarea name="deskripsi" class="form-control" rows="4" required>{{ old('deskripsi', $setting->deskripsi) }}</textarea>
                        </div>
                        
                        <hr>
                        
                        <div class="mb-4 mt-3">
                            <label class="form-label fw-bold">Gambar Ilustrasi PPDB</label>
                            @if($setting->gambar_ilustrasi)
                                <div class="mb-2">
                                    <img src="{{ asset('storage/ppdb/'.$setting->gambar_ilustrasi) }}" alt="Ilustrasi" class="img-thumbnail rounded-3 shadow-sm" style="max-height: 180px; object-fit: cover;">
                                </div>
                            @endif
                            <input type="file" name="gambar_ilustrasi" class="form-control" accept="image/*">
                            <div class="form-text">Maksimal 5MB. Gambar ini akan menggantikan ilustrasi desain SVG standar di halaman publik PPDB.</div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">File Brosur PPDB (PDF / Gambar)</label>
                            @if($setting->brosur_file)
                                <div class="alert alert-success p-2 small mb-2 d-flex align-items-center">
                                    <i class="bi bi-file-earmark-check fs-4 me-2"></i> 
                                    <div>Brosur saat ini telah tersedia.<br><a href="{{ asset('storage/ppdb/'.$setting->brosur_file) }}" target="_blank" class="fw-bold text-success text-decoration-none">Lihat Brosur</a></div>
                                </div>
                            @endif
                            <input type="file" name="brosur_file" class="form-control" accept=".pdf,image/*">
                            <div class="form-text">Maksimal 5MB. Kosongkan jika tidak ingin mengubah brosur saat ini.</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card border-0 shadow-sm h-100 border-top border-success" style="border-top-width: 4px !important;">
                    <div class="card-header bg-white"><h6 class="fw-bold mb-0">Linimasa Jadwal (4 Tahap)</h6></div>
                    <div class="card-body">
                        @for($i = 0; $i < 4; $i++)
                            <div class="p-3 bg-light rounded border mb-3">
                                <h6 class="fw-bold text-primary mb-3">Tahap {{ $i + 1 }}</h6>
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold">Nama Kegiatan</label>
                                        <input type="text" name="jadwal[{{ $i }}][title]" class="form-control form-control-sm" value="{{ old('jadwal.'.$i.'.title', $setting->jadwal[$i]['title'] ?? '') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-bold">Tanggal / Waktu</label>
                                        <input type="text" name="jadwal[{{ $i }}][date]" class="form-control form-control-sm" value="{{ old('jadwal.'.$i.'.date', $setting->jadwal[$i]['date'] ?? '') }}" required placeholder="Contoh: 1 - 28 Februari 2024">
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mt-4">
            <div class="card-footer bg-white p-3 text-end">
                <button type="submit" class="btn btn-primary fw-bold px-5"><i class="bi bi-save me-2"></i> Simpan Pengaturan PPDB</button>
            </div>
        </div>
    </form>
</div>
@endsection
```

## File: `resources/views/admin/guru-mapel/index.blade.php`
```php
{{-- resources/views/admin/guru-mapel/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Pembagian Tugas Mengajar')

@section('content')
<div class="container-fluid py-4">
    <div class="row align-items-center mb-4">
        <div class="col-md-6">
            <h4 class="mb-1 fw-bold">Daftar Guru Mata Pelajaran</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola pendataan guru berdasarkan mata pelajaran yang diampu pada setiap jenjang.</p>
        </div>
        <div class="col-md-6 mt-3 mt-md-0 text-md-end">
            <div class="d-inline-flex align-items-center gap-2 bg-white p-2 rounded-3 shadow-sm border">
                <i class="bi bi-funnel-fill text-muted"></i>
                <label for="filterTahun" class="form-label mb-0 fw-bold text-nowrap" style="font-size: 13px;">TAHUN AJARAN:</label>
                {{-- FIX: Ditambahkan pe-4 agar panah dropdown tidak menabrak teks panjang --}}
                <select class="form-select form-select-sm border-0 bg-light fw-bold text-primary pe-4" id="filterTahun" onchange="window.location.href='?ta_id='+this.value" style="min-width: 180px; cursor: pointer;">
                    <?php if(isset($tahunAjarans)): ?>
                        <?php foreach($tahunAjarans as $ta): ?>
                            <?php $selectedOption = (isset($tahunAktif) && $tahunAktif->id == $ta->id) ? 'selected' : ''; ?>
                            <option value="{{ $ta->id }}" {{ $selectedOption }}>
                                {{ $ta->tahun_ajaran_hijriyah }} H <?php echo ($ta->status_akademik == 'aktif') ? '(Aktif)' : ''; ?>
                            </option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </div>
            
            <button class="btn btn-warning btn-sm ms-2 shadow-sm fw-bold text-dark" data-bs-toggle="modal" data-bs-target="#modalCopyData">
                <i class="bi bi-copy"></i> Salin Data Mapel
            </button>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm bg-primary text-white h-100">
                <div class="card-body">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 13px;">Total Guru Terdaftar</h6>
                    <h3 class="mb-0 fw-bold">{{ $totalGuru }} <span class="fs-6 fw-normal">Orang</span></h3>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm bg-success text-white h-100">
                <div class="card-body">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 13px;">Sudah Memiliki Mapel (Tahun Ini)</h6>
                    <h3 class="mb-0 fw-bold">{{ $guruTerploting }} <span class="fs-6 fw-normal">Orang</span></h3>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm bg-danger text-white h-100">
                <div class="card-body">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 13px;">Belum Memiliki Mapel (Tahun Ini)</h6>
                    <h3 class="mb-0 fw-bold">{{ $guruBelumPloting }} <span class="fs-6 fw-normal">Orang</span></h3>
                </div>
            </div>
        </div>
    </div>

    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills nav-fill p-1 bg-white border rounded-3 shadow-sm" role="tablist">
            <?php $paramTaUrl = isset($tahunAktif) ? '?ta_id='.$tahunAktif->id : ''; ?>
            
            <li class="nav-item" role="presentation">
                <a class="nav-link mb-0 px-0 py-2 <?php echo request()->routeIs('admin.guru-mapel') ? 'active fw-bold shadow-sm' : 'text-muted'; ?>" 
                    href="{{ route('admin.guru-mapel') }}{{ $paramTaUrl }}">
                    <i class="bi bi-journals me-1"></i> Semua Penugasan
                </a>
            </li>
            
            <?php if(isset($jenjangs) && $jenjangs->count() > 0): ?>
                <?php foreach($jenjangs as $j): ?>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link mb-0 px-0 py-2 <?php echo request()->is('admin/guru-mapel/jenjang-tab/'.$j->id) ? 'active fw-bold shadow-sm' : 'text-muted'; ?>" 
                           href="{{ route('admin.guru-mapel.jenjang', $j->id) }}{{ $paramTaUrl }}">
                            <i class="bi bi-bookmark-star-fill me-1"></i> {{ $j->nama_jenjang }}
                        </a>
                    </li>
                <?php endforeach; ?>
            <?php endif; ?>
        </ul>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h6 class="card-title mb-0 fw-bold">Daftar Rekapan Guru</h6>
            <div class="input-group input-group-sm" style="width: 260px;">
                <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama Guru..." onkeyup="searchTableGuru(this)">
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; width: 30%">PROFIL PENDIDIK</th>
                            <th class="text-secondary" style="font-size: 12px; width: 15%">PENUGASAN</th>
                            {{-- KOLOM BARU: TAHUN AJARAN --}}
                            <th class="text-center text-secondary" style="font-size: 12px; width: 15%">TAHUN AJARAN</th>
                            <th class="text-secondary" style="font-size: 12px; width: 35%">MATA PELAJARAN DIAMPU</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-guru">
                        <?php if(isset($gurus) && $gurus->count() > 0): ?>
                            <?php foreach($gurus as $index => $guru): ?>
                            
                            {{-- FIX VSCODE: Semua logika ditaruh di variabel agar tidak error di atribut HTML --}}
                            <?php 
                                $tugas_mapels = isset($guruMapelsGrouped) ? $guruMapelsGrouped->get($guru->id, collect()) : collect(); 
                                $avatarUrl = !empty($guru->foto) ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=100';
                                $badgeColor = $guru->jenis_kelamin == 'L' ? 'primary' : 'danger';
                                $genderIcon = $guru->jenis_kelamin == 'L' ? 'male' : 'female';
                                $genderText = $guru->jenis_kelamin == 'L' ? 'Laki-Laki' : 'Perempuan';
                            ?>

                            <tr class="row-guru">
                                <td class="text-center text-muted">{{ $index + 1 }}</td>
                                
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{{ $avatarUrl }}" class="rounded-circle object-fit-cover shadow-sm me-3 border" style="width: 50px; height: 50px; aspect-ratio: 1/1;">
                                        <div class="data-pencarian">
                                            <span class="fw-bold text-primary d-block mb-1" style="font-size: 14px;">{{ $guru->nama_lengkap }}</span>
                                            <div class="text-muted mb-1" style="font-size: 11px;">
                                                <span class="d-block"><i class="bi bi-upc-scan me-1"></i> NIP: <strong class="text-dark">{{ $guru->nip ?? '-' }}</strong></span>
                                            </div>
                                            <span class="badge bg-{{ $badgeColor }} bg-opacity-10 text-{{ $badgeColor }} border border-{{ $badgeColor }}" style="font-size: 9px; padding: 2px 6px;">
                                                <i class="bi bi-gender-{{ $genderIcon }} me-1"></i>{{ $genderText }}
                                            </span>
                                        </div>
                                    </div>
                                </td>

                                <td>
                                    <div class="d-flex flex-wrap gap-1">
                                        <?php if(isset($guru->jenjangKelas) && $guru->jenjangKelas->count() > 0): ?>
                                            <?php foreach($guru->jenjangKelas as $jk): ?>
                                                <span class="badge bg-success bg-opacity-10 text-success border border-success" style="font-size: 10px;">
                                                    <i class="bi bi-check-circle me-1"></i>{{ $jk->nama_jenjang }}
                                                </span>
                                            <?php endforeach; ?>
                                        <?php else: ?>
                                            <span class="text-muted fst-italic" style="font-size: 11px;">Belum terdaftar jenjang</span>
                                        <?php endif; ?>
                                    </div>
                                </td>

                                <td class="text-center">
                                    <span class="badge bg-info bg-opacity-10 text-info border border-info" style="font-size: 10px;">
                                        <i class="bi bi-calendar-event me-1"></i>{{ $tahunAktif->tahun_ajaran_hijriyah ?? '-' }} H
                                    </span>
                                </td>

                                <td>
                                    <?php if($tugas_mapels->count() > 0): ?>
                                        <div class="d-flex flex-column gap-1">
                                            <?php $no_mapel = 1; ?>
                                            <?php foreach($tugas_mapels as $tm): ?>
                                            <div class="d-flex align-items-center bg-light p-1 px-2 border rounded" style="font-size: 12px;">
                                                <span class="text-muted fw-bold me-2" style="font-size: 11px;"><?php echo $no_mapel++; ?>.</span>
                                                <span class="badge bg-secondary me-2" style="font-size: 9px;">{{ $tm->mapel->jenjang->nama_jenjang ?? 'Umum' }}</span>
                                                <span class="fw-medium text-dark">{{ $tm->mapel->nama_mapel ?? '-' }}</span>
                                            </div>
                                            <?php endforeach; ?>
                                        </div>
                                    <?php else: ?>
                                        <div class="text-center p-2 text-danger bg-danger bg-opacity-10 border border-danger border-opacity-25 rounded" style="font-size: 12px;">
                                            <i class="bi bi-x-circle me-1"></i> Kosong (Belum Diplot di Tahun Ini)
                                        </div>
                                    <?php endif; ?>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">Belum ada data guru.</td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCopyData" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('admin.guru-mapel.copy') }}" method="POST">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-warning border-bottom-0 pb-3">
                    <h5 class="modal-title fw-bold text-dark"><i class="bi bi-copy me-2"></i>Salin Penugasan Mapel</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4 bg-light">
                    <p class="text-muted" style="font-size: 13px;">Gunakan fitur ini untuk menduplikat data penugasan mapel dari tahun ajaran lama ke tahun ajaran yang baru.</p>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-dark">DARI Tahun Ajaran (Sumber)</label>
                        <select name="dari_tahun_id" class="form-select" required>
                            <option value="">-- Pilih Tahun Sumber --</option>
                            <?php if(isset($tahunAjarans)): ?>
                                <?php foreach($tahunAjarans as $ta): ?>
                                    <option value="{{ $ta->id }}">{{ $ta->tahun_ajaran_hijriyah }} H</option>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </select>
                    </div>
                    <div class="text-center mb-3 text-muted"><i class="bi bi-arrow-down-circle-fill fs-3"></i></div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-success">KE Tahun Ajaran (Tujuan)</label>
                        <select name="ke_tahun_id" class="form-select border-success" required>
                            <option value="">-- Pilih Tahun Tujuan --</option>
                            <?php if(isset($tahunAjarans)): ?>
                                <?php foreach($tahunAjarans as $ta): ?>
                                    <?php $selectedTujuan = (isset($tahunAktif) && $tahunAktif->id == $ta->id) ? 'selected' : ''; ?>
                                    <option value="{{ $ta->id }}" {{ $selectedTujuan }}>
                                        {{ $ta->tahun_ajaran_hijriyah }} H
                                    </option>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </select>
                        <div class="form-text text-danger" style="font-size:11px;">Peringatan: Jika di Tahun Tujuan sudah ada data, data lama akan DITIMPA.</div>
                    </div>
                </div>
                <div class="modal-footer border-top-0 bg-white">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning fw-bold"><i class="bi bi-clipboard-check me-1"></i> Mulai Salin Data</button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function searchTableGuru(inputElement) {
        let filter = inputElement.value.toLowerCase();
        let tbody = document.getElementById('tbody-guru');
        if (!tbody) return;
        let rows = tbody.getElementsByClassName('row-guru');
        for (let i = 0; i < rows.length; i++) {
            let tdProfil = rows[i].getElementsByTagName("td")[1]; 
            if (tdProfil) {
                let textValue = tdProfil.textContent || tdProfil.innerText;
                rows[i].style.display = textValue.toLowerCase().indexOf(filter) > -1 ? "" : "none";
            }
        }
    }
    
    document.addEventListener("DOMContentLoaded", function() {
        <?php if(session('success')): ?>
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '<?php echo session("success"); ?>', showConfirmButton: true });
        <?php endif; ?>
        <?php if(session('error')): ?>
            Swal.fire({ icon: 'error', title: 'Perhatian!', text: '<?php echo session("error"); ?>', showConfirmButton: true });
        <?php endif; ?>
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/guru-mapel/jenjang.blade.php`
```php
{{-- resources/views/admin/guru-mapel/jenjang.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Tugas Mengajar ' . $jenjang_aktif->nama_jenjang)

@section('content')
<div class="container-fluid py-4">

    <div class="row align-items-center mb-4">
        <div class="col-md-6">
            <h4 class="mb-1 fw-bold text-primary">Mapel Jenjang: <?php echo $jenjang_aktif->nama_jenjang; ?></h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola pendataan guru berdasarkan mata pelajaran khusus di jenjang ini.</p>
        </div>
        <div class="col-md-6 mt-3 mt-md-0 text-md-end">
            <div class="d-inline-flex align-items-center gap-2 bg-white p-2 rounded-3 shadow-sm border">
                <i class="bi bi-funnel-fill text-muted"></i>
                <label for="filterTahun" class="form-label mb-0 fw-bold text-nowrap" style="font-size: 13px;">TAHUN AJARAN:</label>
                <select class="form-select form-select-sm border-0 bg-light fw-bold text-primary pe-4" id="filterTahun" onchange="window.location.href='?ta_id='+this.value" style="min-width: 180px; cursor: pointer;">
                    <?php if(isset($tahunAjarans)): ?>
                        <?php foreach($tahunAjarans as$ta): ?>
                            <?php $selectedOption = (isset($tahunAktif) && $tahunAktif->id ==$ta->id) ? 'selected' : ''; ?>
                            <option value="{{ $ta->id }}" {{ $selectedOption }}>
                                {{ $ta->tahun_ajaran_hijriyah }} H <?php echo ($ta->status_akademik == 'aktif') ? '(Aktif)' : ''; ?>
                            </option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm bg-primary text-white h-100">
                <div class="card-body">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 13px;">Guru Terdaftar (Jenjang Ini)</h6>
                    <h3 class="mb-0 fw-bold">{{ $totalGuruJenjang }} <span class="fs-6 fw-normal">Orang</span></h3>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm bg-success text-white h-100">
                <div class="card-body">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 13px;">Terploting Mapel (Tahun Ini)</h6>
                    <h3 class="mb-0 fw-bold">{{ $guruTerplotingJenjang }} <span class="fs-6 fw-normal">Orang</span></h3>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card border-0 shadow-sm bg-danger text-white h-100">
                <div class="card-body">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 13px;">Belum Ploting Mapel (Kosong)</h6>
                    <h3 class="mb-0 fw-bold">{{ $guruBelumPlotingJenjang }} <span class="fs-6 fw-normal">Orang</span></h3>
                </div>
            </div>
        </div>
    </div>

    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills nav-fill p-1 bg-white border rounded-3 shadow-sm" role="tablist">
            <?php $paramTaUrl = isset($tahunAktif) ? '?ta_id='.$tahunAktif->id : ''; ?>
            
            <li class="nav-item" role="presentation">
                <a class="nav-link mb-0 px-0 py-2 <?php echo request()->routeIs('admin.guru-mapel') ? 'active fw-bold shadow-sm' : 'text-muted'; ?>" 
                    href="{{ route('admin.guru-mapel') }}{{ $paramTaUrl }}">
                    <i class="bi bi-journals me-1"></i> Semua Penugasan
                </a>
            </li>
            
            <?php if(isset($jenjangs) &&$jenjangs->count() > 0): ?>
                <?php foreach($jenjangs as$j): ?>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link mb-0 px-0 py-2 <?php echo request()->is('admin/guru-mapel/jenjang-tab/'.$j->id) ? 'active fw-bold shadow-sm' : 'text-muted'; ?>" 
                           href="{{ route('admin.guru-mapel.jenjang', $j->id) }}{{$paramTaUrl }}">
                            <i class="bi bi-bookmark-star-fill me-1"></i> {{ $j->nama_jenjang }}
                        </a>
                    </li>
                <?php endforeach; ?>
            <?php endif; ?>
        </ul>
    </div>

    <div class="card shadow-sm border-0 border-top border-primary border-3">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h6 class="card-title mb-0 fw-bold text-primary">Daftar Penugasan: {{ $jenjang_aktif->nama_jenjang }}</h6>
            <div class="input-group input-group-sm" style="width: 260px;">
                <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama Guru..." onkeyup="searchTableGuru(this)">
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; width: 30%">PROFIL PENDIDIK</th>
                            <th class="text-secondary" style="font-size: 12px; width: 10%">PENUGASAN</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 15%">TAHUN AJARAN</th>
                            <th class="text-secondary" style="font-size: 12px; width: 30%">MATA PELAJARAN DIAMPU</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 10%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-guru">
                        <?php if(isset($gurus) &&$gurus->count() > 0): ?>
                            <?php foreach($gurus as $index =>$guru): ?>
                            
                            <?php 
                                $tugas_mapels = isset($guruMapelsGrouped) ? $guruMapelsGrouped->get($guru->id, collect()) : collect(); 
                                $avatarUrl = !empty($guru->foto) ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=100';
                            ?>

                            <tr class="row-guru">
                                <td class="text-center text-muted">{{ $index + 1 }}</td>
                                
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="{{ $avatarUrl }}" class="rounded-circle object-fit-cover shadow-sm me-3 border" style="width: 50px; height: 50px; aspect-ratio: 1/1;">
                                        <div class="data-pencarian">
                                            <span class="fw-bold text-primary d-block mb-1" style="font-size: 14px;">{{ $guru->nama_lengkap }}</span>
                                            <div class="text-muted mb-1" style="font-size: 11px;">
                                                <span class="d-block"><i class="bi bi-upc-scan me-1"></i> NIP: <strong class="text-dark">{{ $guru->nip ?? '-' }}</strong></span>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <td>
                                    <div class="d-flex flex-wrap gap-1">
                                        <span class="badge bg-success bg-opacity-10 text-success border border-success" style="font-size: 10px;">
                                            <i class="bi bi-check-circle me-1"></i>{{ $jenjang_aktif->nama_jenjang }}
                                        </span>
                                    </div>
                                </td>

                                <td class="text-center">
                                    <span class="badge bg-info bg-opacity-10 text-info border border-info" style="font-size: 10px;">
                                        <i class="bi bi-calendar-event me-1"></i>{{ $tahunAktif->tahun_ajaran_hijriyah ?? '-' }} H
                                    </span>
                                </td>

                                <td>
                                    <?php if($tugas_mapels->count() > 0): ?>
                                        <div class="d-flex flex-column gap-1">
                                            <?php $no_mapel = 1; ?>
                                            <?php foreach($tugas_mapels as$tm): ?>
                                            <div class="d-flex align-items-center bg-light p-1 px-2 border rounded" style="font-size: 12px;">
                                                <span class="text-muted fw-bold me-2" style="font-size: 11px;"><?php echo $no_mapel++; ?>.</span>
                                                <span class="badge bg-secondary me-2" style="font-size: 9px;">{{ $tm->mapel->jenjang->nama_jenjang ?? 'Umum' }}</span>
                                                <span class="fw-medium text-dark">{{ $tm->mapel->nama_mapel ?? '-' }}</span>
                                            </div>
                                            <?php endforeach; ?>
                                        </div>
                                    <?php else: ?>
                                        <div class="text-center p-2 text-danger bg-danger bg-opacity-10 border border-danger border-opacity-25 rounded" style="font-size: 12px;">
                                            <i class="bi bi-x-circle me-1"></i> Belum Diplot di Tahun Ini
                                        </div>
                                    <?php endif; ?>
                                </td>

                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-outline-primary" title="Ploting Mapel Guru Ini" onclick="openPlotingModal({{ $guru->id }})">
                                        <i class="bi bi-journal-plus fs-5"></i>
                                    </button>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">Belum ada guru yang ditugaskan ke jenjang ini.</td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPloting" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <form action="{{ route('admin.guru-mapel.sync') }}" method="POST"> 
            @csrf
            <input type="hidden" name="guru_id" id="plot_guru_id">
            <input type="hidden" name="jenjang_id" id="plot_jenjang_id" value="{{ $jenjang_aktif->id }}"> 
            <input type="hidden" name="tahun_ajaran_id" value="{{ $tahunAktif->id ?? '' }}"> 
            
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0 bg-light">
                    <h5 class="modal-title fw-bold">Ploting Mapel: <span id="plot_guru_nama" class="text-primary"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4" id="plot_modal_body">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2 text-muted" style="font-size: 14px;">Memuat data mata pelajaran...</p>
                    </div>
                </div>
                <div class="modal-footer border-top-0 bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="btn_save_plot"><i class="bi bi-save me-1"></i> Simpan Penugasan</button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function searchTableGuru(inputElement) {
        let filter = inputElement.value.toLowerCase();
        let tbody = document.getElementById('tbody-guru');
        if (!tbody) return;
        let rows = tbody.getElementsByClassName('row-guru');
        for (let i = 0; i < rows.length; i++) {
            let tdProfil = rows[i].getElementsByTagName("td")[1]; 
            if (tdProfil) {
                let textValue = tdProfil.textContent || tdProfil.innerText;
                rows[i].style.display = textValue.toLowerCase().indexOf(filter) > -1 ? "" : "none";
            }
        }
    }

    function filterMapelByCategory(categoryId) {
        let rows = document.querySelectorAll('.mapel-row');
        rows.forEach(row => {
            if (categoryId === 'all') {
                row.style.display = '';
            } else {
                row.style.display = (row.getAttribute('data-kategori') === categoryId) ? '' : 'none';
            }
        });

        let tables = document.querySelectorAll('.mapel-table');
        tables.forEach(table => {
            let no = 1;
            let trs = table.querySelectorAll('.mapel-row');
            trs.forEach(tr => {
                if(tr.style.display !== 'none') {
                    let colNo = tr.querySelector('.col-no');
                    if(colNo) colNo.innerText = no++;
                }
            });
        });
    }

    function openPlotingModal(guruId) {
        const modal = new bootstrap.Modal(document.getElementById('modalPloting'));
        modal.show();
        
        document.getElementById('plot_guru_id').value = guruId;
        document.getElementById('plot_guru_nama').innerText = '...';
        document.getElementById('plot_modal_body').innerHTML = '<div class="text-center py-4"><div class="spinner-border text-primary" role="status"></div><p class="mt-2 text-muted" style="font-size: 14px;">Memuat data mata pelajaran...</p></div>';
        document.getElementById('btn_save_plot').disabled = true;
        
        let apiUrl = `/admin/guru-mapel/get-guru-mapel-data/${guruId}?jenjang_id={{ $jenjang_aktif->id }}&ta_id={{ $tahunAktif->id ?? '' }}`;
        
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                document.getElementById('plot_guru_nama').innerText = data.guru_nama;
                document.getElementById('plot_modal_body').innerHTML = data.html;
                document.getElementById('btn_save_plot').disabled = !data.has_jenjang;
            })
            .catch(error => {
                document.getElementById('plot_modal_body').innerHTML = '<div class="alert alert-danger border-0">Gagal memuat koneksi data server.</div>';
            });
    }

    document.addEventListener("DOMContentLoaded", function() {
        <?php if(session('success')): ?>
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '<?php echo session("success"); ?>', showConfirmButton: false, timer: 2000 });
        <?php endif; ?>
        
        <?php if(isset($errors) &&$errors->any()): ?>
            let errorHtml = '<ul class="text-start mb-0">';
            <?php foreach($errors->all() as$error): ?>
                errorHtml += '<li><?php echo $error; ?></li>';
            <?php endforeach; ?>
            errorHtml += '</ul>';

            Swal.fire({ icon: 'error', title: 'Oops...', html: errorHtml });
        <?php endif; ?>
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/tarif/index.blade.php`
```php
{{-- resources/views/admin/keuangan/tarif/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Penetapan Tarif Keuangan')

@push('styles')
<style>
    .nav-pills .nav-link { transition: all 0.3s ease; color: #495057; }
    .nav-pills .nav-link:hover { background-color: #f8f9fa; }
    .nav-pills .nav-link.active {
        font-weight: bold; background-color: #0d6efd !important; color: #ffffff !important; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Pengaturan Keuangan - <span class="text-primary">{{ $jenjang->nama_jenjang ?? 'Jenjang' }}</span></h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola Kategori Tagihan dan Penetapan Tarif Pembayaran Siswa.</p>
        </div>
    </div>

    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex" role="tablist">
            <li class="nav-item flex-fill text-center">
                <a href="{{ route('admin.keuangan.kategori', $jenjang->id) }}" class="nav-link w-100 mb-0 py-2 text-dark">
                    <i class="bi bi-tags me-1"></i> 1. Master Kategori Pembayaran
                </a>
            </li>
            <li class="nav-item flex-fill text-center">
                <a href="{{ route('admin.keuangan.tarif', $jenjang->id) }}" class="nav-link active w-100 mb-0 py-2">
                    <i class="bi bi-cash-coin me-1"></i> 2. Penetapan Tarif & Tagihan
                </a>
            </li>
        </ul>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm">
            <ul class="mb-0 fw-medium">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
            <h6 class="card-title mb-0 fw-bold">Daftar Penetapan Tarif</h6>
            <button class="btn btn-success btn-sm d-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahTarif">
                <i class="bi bi-node-plus-fill"></i> Tetapkan Tarif Baru
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; width: 20%">KATEGORI & SIKLUS</th>
                            <th class="text-secondary" style="font-size: 12px; width: 15%">BERLAKU UNTUK</th>
                            <th class="text-secondary" style="font-size: 12px; width: 15%">PERIODE</th>
                            <th class="text-end text-secondary" style="font-size: 12px; width: 15%">TARIF DASAR</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 10%">DIKALI</th>
                            <th class="text-end text-secondary" style="font-size: 12px; width: 15%">TOTAL TAGIHAN</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tarifs as $index => $tarif)
                        <tr>
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <span class="fw-bold text-primary d-block">{{ $tarif->kategori->nama ?? '-' }}</span>
                                <span class="badge bg-secondary text-secondary bg-opacity-10 border border-secondary" style="font-size: 10px;">{{ $tarif->kategori->tipe ?? '-' }}</span>
                            </td>
                            <td>
                                @if($tarif->tingkat_kelas_id)
                                    <span class="badge bg-info text-dark border border-info"><i class="bi bi-diagram-2 me-1"></i>Tingkat {{ $tarif->tingkat->nama_tingkat ?? '' }}</span>
                                @else
                                    <span class="badge bg-primary bg-opacity-10 text-primary border border-primary"><i class="bi bi-globe me-1"></i>Semua Tingkat</span>
                                @endif
                            </td>
                            <td>
                                <span class="d-block fw-bold text-dark">{{ $tarif->tahunAjaran->tahun_ajaran }}</span>
                                <small class="text-muted">{{ $tarif->semester ? $tarif->semester->nama : 'Semua Semester' }}</small>
                            </td>
                            <td class="text-end fw-medium text-dark">
                                Rp {{ number_format($tarif->nominal, 0, ',', '.') }}
                            </td>
                            <td class="text-center fw-bold text-info">
                                x {{ $tarif->pengali }}
                            </td>
                            <td class="text-end fw-bold text-success fs-6">
                                Rp {{ number_format($tarif->total_tarif, 0, ',', '.') }}
                            </td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalEditTarif{{ $tarif->id }}" title="Edit Nominal">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger" title="Hapus Tarif" onclick="confirmDelete({{ $tarif->id }}, 'Tarif {{ $tarif->kategori->nama ?? '' }}')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                                <form id="delete-form-{{ $tarif->id }}" action="{{ route('admin.keuangan.tarif.destroy', $tarif->id) }}" method="POST" class="d-none">
                                    @csrf @method('DELETE')
                                </form>
                            </td>
                        </tr>

                        <div class="modal fade" id="modalEditTarif{{ $tarif->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header bg-light border-bottom-0">
                                        <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-pencil-square me-2"></i>Edit Penetapan Tarif</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form action="{{ route('admin.keuangan.tarif.update', $tarif->id) }}" method="POST">
                                        @csrf @method('PUT')
                                        <div class="modal-body p-4 text-start">
                                            
                                            <div class="row mb-3">
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-medium">Kategori Pembayaran <span class="text-danger">*</span></label>
                                                    <select class="form-select bg-light" name="kategori_id" id="edit_kategori_{{ $tarif->id }}" required style="pointer-events: none;">
                                                        <option value="{{ $tarif->kategori_id }}" data-tipe="{{ $tarif->kategori->tipe ?? '' }}" selected>{{ $tarif->kategori->nama ?? '-' }}</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-medium text-primary">Berlaku Untuk (Tingkat) <span class="text-danger">*</span></label>
                                                    <select class="form-select border-primary" name="tingkat_kelas_id">
                                                        <option value="">-- Semua Tingkat (Global Jenjang) --</option>
                                                        @foreach($tingkats as $t)
                                                            <option value="{{ $t->id }}" {{ $tarif->tingkat_kelas_id == $t->id ? 'selected' : '' }}>Tingkat {{ $t->nama_tingkat }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-medium">Tahun Ajaran <span class="text-danger">*</span></label>
                                                    <select class="form-select" name="tahun_ajaran_id" required>
                                                        @foreach($tahunAjarans as $ta)
                                                            <option value="{{ $ta->id }}" {{ $tarif->tahun_ajaran_id == $ta->id ? 'selected' : '' }}>
                                                                {{ $ta->tahun_ajaran }} {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-medium">Semester / Periode</label>
                                                    <select class="form-select" name="semester_id">
                                                        <option value="">-- Berlaku 1 Tahun Penuh --</option>
                                                        @foreach($semesters as $smt)
                                                            <option value="{{ $smt->id }}" {{ $tarif->semester_id == $smt->id ? 'selected' : '' }}>{{ $smt->nama }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="p-3 bg-light rounded border">
                                                <div class="row g-3 align-items-center">
                                                    <div class="col-md-4">
                                                        <label class="form-label fw-medium text-primary">1. Tarif Dasar (Nominal) <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text bg-white fw-bold">Rp</span>
                                                            <input type="number" class="form-control fw-bold text-dark" id="edit_nominal_{{ $tarif->id }}" name="nominal" value="{{ $tarif->nominal }}" required min="0" onkeyup="kalkulasiTotal('edit', '{{ $tarif->id }}')">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1 text-center fw-bold fs-4 text-muted pt-4">X</div>
                                                    <div class="col-md-3">
                                                        <label class="form-label fw-medium text-info" id="edit_label_pengali_{{ $tarif->id }}">2. Dikali (Jumlah Siklus)</label>
                                                        <input type="number" class="form-control fw-bold text-center text-info" id="edit_pengali_{{ $tarif->id }}" name="pengali" value="{{ $tarif->pengali }}" required min="1" onkeyup="kalkulasiTotal('edit', '{{ $tarif->id }}')">
                                                    </div>
                                                    <div class="col-md-1 text-center fw-bold fs-4 text-muted pt-4">=</div>
                                                    <div class="col-md-3">
                                                        <label class="form-label fw-bold text-success">3. Total Tagihan</label>
                                                        <input type="text" class="form-control fw-bold text-success text-end border-success bg-success bg-opacity-10" id="edit_total_{{ $tarif->id }}" value="Rp {{ number_format($tarif->total_tarif, 0, ',', '.') }}" readonly>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="modal-footer bg-light">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-primary fw-bold px-4">Simpan Perubahan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                <i class="bi bi-cash-stack fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada penetapan tarif yang dilakukan.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambahTarif" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-success text-white border-bottom-0">
                <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-node-plus-fill me-2"></i>Penetapan Tarif Baru</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.keuangan.tarif.store', $jenjang->id) }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="row mb-3">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium">Kategori Pembayaran <span class="text-danger">*</span></label>
                            <select class="form-select" name="kategori_id" id="add_kategori" required onchange="kalkulasiTotal('add', null, true)">
                                <option value="">-- Pilih Kategori --</option>
                                @foreach($kategoris as $k)
                                    <option value="{{ $k->id }}" data-tipe="{{ $k->tipe }}">{{ $k->nama }} ({{ $k->tipe }})</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium text-primary">Berlaku Untuk (Tingkat) <span class="text-danger">*</span></label>
                            <select class="form-select border-primary" name="tingkat_kelas_id">
                                <option value="">-- Semua Tingkat (Global Jenjang) --</option>
                                @foreach($tingkats as $t)
                                    <option value="{{ $t->id }}">Tingkat {{ $t->nama_tingkat }}</option>
                                @endforeach
                            </select>
                            <div class="form-text" style="font-size: 11px;">Biarkan "Semua Tingkat" jika tagihan ini dipukul rata.</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium">Tahun Ajaran <span class="text-danger">*</span></label>
                            <select class="form-select" name="tahun_ajaran_id" required>
                                @foreach($tahunAjarans as $ta)
                                    <option value="{{ $ta->id }}">{{ $ta->tahun_ajaran }} {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-medium">Semester / Periode</label>
                            <select class="form-select" name="semester_id">
                                <option value="">-- Berlaku 1 Tahun Penuh --</option>
                                @foreach($semesters as $smt)
                                    <option value="{{ $smt->id }}">{{ $smt->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="p-3 bg-light rounded border">
                        <div class="row g-3 align-items-center">
                            <div class="col-md-4">
                                <label class="form-label fw-medium text-primary">1. Tarif Dasar (Nominal) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white fw-bold">Rp</span>
                                    <input type="number" class="form-control fw-bold text-dark" id="add_nominal" name="nominal" placeholder="0" required min="0" onkeyup="kalkulasiTotal('add')">
                                </div>
                            </div>
                            <div class="col-md-1 text-center fw-bold fs-4 text-muted pt-4">X</div>
                            <div class="col-md-3">
                                <label class="form-label fw-medium text-info" id="add_label_pengali">2. Dikali (Jumlah Siklus)</label>
                                <input type="number" class="form-control fw-bold text-center text-info" id="add_pengali" name="pengali" value="1" required min="1" onkeyup="kalkulasiTotal('add')">
                            </div>
                            <div class="col-md-1 text-center fw-bold fs-4 text-muted pt-4">=</div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold text-success">3. Total Tagihan</label>
                                <input type="text" class="form-control fw-bold text-success text-end border-success bg-success bg-opacity-10" id="add_total" value="Rp 0" readonly>
                            </div>
                        </div>
                        <div class="form-text mt-2" style="font-size: 11px;">
                            <i class="bi bi-info-circle"></i> Angka pengali otomatis menyesuaikan tipe tagihan. Anda bebas mengubahnya.
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success px-4 fw-bold">Tetapkan Tarif</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function kalkulasiTotal(mode, id = null, isCategoryChange = false) {
        let prefix = mode === 'add' ? 'add' : 'edit';
        let idSuffix = id ? '_' + id : '';
        
        let selectKat = document.getElementById(prefix + '_kategori' + idSuffix);
        let inputNominal = document.getElementById(prefix + '_nominal' + idSuffix);
        let inputPengali = document.getElementById(prefix + '_pengali' + idSuffix);
        let inputTotal = document.getElementById(prefix + '_total' + idSuffix);
        let labelPengali = document.getElementById(prefix + '_label_pengali' + idSuffix);

        let selectedOption = selectKat.options[selectKat.selectedIndex];
        let tipe = selectedOption ? selectedOption.getAttribute('data-tipe') : '';
        
        let sistemAkademik = "{{ $jenjang->sistem_akademik ?? 'semester' }}";

        if(isCategoryChange) {
            let valPengali = 1;
            let textLabel = "Dikali (Jumlah Siklus)";

            if(tipe === 'Harian') {
                valPengali = sistemAkademik === 'semester' ? 130 : 85; 
                textLabel = "Dikali (Jml Hari Aktif)";
            } else if (tipe === 'Mingguan') {
                valPengali = sistemAkademik === 'semester' ? 24 : 16; 
                textLabel = "Dikali (Jml Minggu Aktif)";
            } else if (tipe === 'Bulanan') {
                valPengali = sistemAkademik === 'semester' ? 6 : 4; 
                textLabel = "Dikali (Jml Bulan)";
            } else if (tipe === 'Per Periode' || tipe === 'Tahunan' || tipe === 'Sekali Bayar' || tipe === 'Insidental') {
                valPengali = 1;
                textLabel = "Dikali (Bayar 1x)";
            }

            inputPengali.value = valPengali;
            labelPengali.innerText = textLabel;
        }

        let nominal = parseFloat(inputNominal.value) || 0;
        let pengali = parseFloat(inputPengali.value) || 1;
        let total = nominal * pengali;

        inputTotal.value = "Rp " + new Intl.NumberFormat('id-ID').format(total);
    }

    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus Penetapan?',
            text: "Anda akan menghapus " + nama + ". Lanjutkan?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2000 });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/gajih/guru/index.blade.php`
```php
{{-- resources/views/admin/keuangan/gajih/guru/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Penetapan Gaji Guru')

@push('styles')
<style>
    .avatar-initial { width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; }
    .table-payroll th { font-size: 10px; letter-spacing: 0.5px; white-space: nowrap; vertical-align: middle; }
    .table-payroll td { font-size: 13px; vertical-align: middle; white-space: nowrap; }
    .val-plus { color: #198754; font-weight: 600; }
    .val-minus { color: #dc3545; font-weight: 600; }
    .val-zero { color: #adb5bd; font-style: italic; font-size: 11px; }
    .val-total { font-weight: 800; font-size: 14px; }
</style>
@endpush

@section('content')

@php
    $tahunAjarans = \App\Models\TahunAjaran::orderBy('tahun_ajaran', 'desc')->get();
    $taAktif = \App\Models\TahunAjaran::where('status_akademik', 'aktif')->first();
    $selectedTaId = request('tahun_ajaran_id', $taAktif ? $taAktif->id : null);

    $kategoris = \App\Models\GajiKategori::where('tahun_ajaran_id', $selectedTaId)
        ->whereIn('peruntukan', ['guru', 'semua'])
        ->orderBy('sifat', 'asc')
        ->orderBy('id', 'asc')
        ->get();
        
    $pemasukans = $kategoris->where('sifat', 'pemasukan');
    $potongans = $kategoris->where('sifat', 'potongan');

    $gurus = \App\Models\Guru::with('jabatans')->orderBy('nama_lengkap', 'asc')->get();
@endphp

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h4 class="mb-1 fw-bold"><i class="bi bi-person-lines-fill text-primary me-2"></i>Penetapan Gaji Guru</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Atur dan pantau rincian nominal komponen gaji untuk masing-masing guru.</p>
        </div>
        
        <div class="d-flex gap-2">
            <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 mb-0 bg-white p-2 rounded border shadow-sm">
                <label class="form-label mb-0 fw-medium text-nowrap text-muted" style="font-size: 13px;"><i class="bi bi-funnel me-1"></i>Tahun Ajaran:</label>
                <select name="tahun_ajaran_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()" style="min-width: 180px; font-size: 13px;">
                    @foreach($tahunAjarans as $ta)
                        <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                            {{ $ta->tahun_ajaran_hijriyah }} H ({{ $ta->status_akademik == 'aktif' ? 'Aktif' : 'Riwayat' }})
                        </option>
                    @endforeach
                </select>
            </form>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body p-3">
            <div class="row g-2">
                <div class="col-md-5">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" class="form-control border-start-0" id="searchGuru" placeholder="Cari NUPTK atau Nama Guru..." onkeyup="filterTable()">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-sm" id="filterStatus" onchange="filterTable()">
                        <option value="">Semua Status Kepegawaian</option>
                        <option value="PNS">PNS / ASN</option>
                        <option value="Honorer">Guru Honorer / GTY</option>
                    </select>
                </div>
                <div class="col-md-4 text-end">
                    <button class="btn btn-sm btn-outline-success"><i class="bi bi-file-earmark-excel me-1"></i> Export Rekap</button>
                    <button class="btn btn-sm btn-primary"><i class="bi bi-cash-coin me-1"></i> Cetak Slip Massal</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-bordered table-payroll mb-0" id="tabelGajiGuru">
                    <thead class="table-light text-secondary text-center">
                        <tr>
                            <th width="3%" rowspan="2" class="align-middle">NO</th>
                            <th width="20%" rowspan="2" class="align-middle text-start ps-3">PROFIL GURU</th>
                            
                            @if($pemasukans->count() > 0)
                                <th colspan="{{ $pemasukans->count() }}" class="bg-success bg-opacity-10 text-success border-success border-opacity-25">PEMASUKAN (+)</th>
                            @endif
\
                            @if($potongans->count() > 0)
                                <th colspan="{{ $potongans->count() }}" class="bg-danger bg-opacity-10 text-danger border-danger border-opacity-25">POTONGAN (-)</th>
                            @endif

                            <th width="10%" rowspan="2" class="align-middle bg-primary bg-opacity-10 text-primary">ESTIMASI TOTAL</th>
                            <th width="8%" rowspan="2" class="align-middle">AKSI</th>
                        </tr>
                        <tr>
                            @foreach($pemasukans as $pemasukan)
                                <th class="bg-success bg-opacity-10 border-success border-opacity-25" title="{{ $pemasukan->keterangan }}">
                                    {{ strtoupper($pemasukan->nama) }}<br>
                                    <small style="font-size: 8px; opacity: 0.7;">{{ ucfirst($pemasukan->tipe_hitungan) }}</small>
                                </th>
                            @endforeach

                            @foreach($potongans as $potongan)
                                <th class="bg-danger bg-opacity-10 border-danger border-opacity-25" title="{{ $potongan->keterangan }}">
                                    {{ strtoupper($potongan->nama) }}<br>
                                    <small style="font-size: 8px; opacity: 0.7;">{{ ucfirst($potongan->tipe_hitungan) }}</small>
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody id="tbody-gaji-guru">
                        @forelse($gurus as $index => $guru)
                            <tr class="row-guru">
                                <td class="text-center text-muted align-middle">{{ $index + 1 }}</td>
                                <td class="ps-3 align-middle">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ $guru->foto ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=100' }}" 
                                             class="rounded-circle object-fit-cover shadow-sm me-3 border" 
                                             style="width: 45px; height: 45px; aspect-ratio: 1/1;" 
                                             alt="Foto {{ $guru->nama_lengkap }}">
                                        
                                        <div class="data-pencarian">
                                            <span class="fw-bold text-primary d-block mb-1" style="font-size: 13px;">{{ $guru->nama_lengkap }}</span>
                                            <div class="text-muted mb-1" style="font-size: 11px; line-height: 1.4;">
                                                <span class="d-block"><i class="bi bi-upc-scan me-1"></i> NIP/NUPTK: <strong class="text-dark">{{ $guru->nip ?? $guru->nuptk ?? '-' }}</strong></span>
                                                <span class="status-pegawai d-none">{{ $guru->status_kepegawaian ?? '-' }}</span>
                                            </div>
                                            <span class="badge {{ $guru->jenis_kelamin == 'L' ? 'bg-primary' : 'bg-danger' }} bg-opacity-10 text-{{ $guru->jenis_kelamin == 'L' ? 'primary' : 'danger' }} border border-{{ $guru->jenis_kelamin == 'L' ? 'primary' : 'danger' }}" style="font-size: 9px; padding: 2px 6px;">
                                                <i class="bi {{ $guru->jenis_kelamin == 'L' ? 'bi-gender-male' : 'bi-gender-female' }} me-1"></i>{{ $guru->jenis_kelamin == 'L' ? 'Laki-Laki' : 'Perempuan' }}
                                            </span>
                                        </div>
                                    </div>
                                </td>
                                
                                @foreach($pemasukans as $pemasukan)
                                    <td class="text-end align-middle val-zero">Belum diatur</td>
                                @endforeach

                                @foreach($potongans as $potongan)
                                    <td class="text-end align-middle val-zero">Belum diatur</td>
                                @endforeach

                                <td class="text-end align-middle val-total text-secondary">-</td>
                                
                                <td class="text-center align-middle">
                                    <button class="btn btn-sm btn-outline-primary shadow-sm fw-bold w-100" style="font-size: 11px;" title="Atur Komponen">
                                        <i class="bi bi-sliders me-1"></i> Atur
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ 4 + $kategoris->count() }}" class="text-center py-5 text-muted">
                                    <i class="bi bi-people fs-1 d-block mb-3 opacity-50"></i>
                                    Belum ada data guru yang terdaftar.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-light border-top py-3">
            <div class="d-flex justify-content-end align-items-center">
                <span class="text-muted fw-medium" style="font-size: 13px;"><i class="bi bi-info-circle me-1"></i> Menampilkan {{ $gurus->count() }} Data Guru</span>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function filterTable() {
        let inputSearch = document.getElementById('searchGuru').value.toLowerCase();
        let inputStatus = document.getElementById('filterStatus').value.toLowerCase();
        let rows = document.querySelectorAll('.row-guru');

        rows.forEach(row => {
            let nama = row.querySelector('.data-pencarian').innerText.toLowerCase();
            let status = row.querySelector('.status-pegawai').innerText.toLowerCase();

            let matchesSearch = nama.includes(inputSearch);
            let matchesStatus = inputStatus === "" || status.includes(inputStatus);

            if (matchesSearch && matchesStatus) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    }
</script>
@endpush

@endsection
```

## File: `resources/views/admin/keuangan/gajih/kategori/index.blade.php`
```php
{{-- resources/views/admin/keuangan/gajih/kategori/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Kategori Komponen Gaji')

@push('styles')
<style>
    .tipe-badge { font-size: 10px; font-weight: 600; padding: 4px 8px; letter-spacing: 0.5px; }
    .dynamic-input-group { transition: all 0.3s ease; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h4 class="mb-1 fw-bold"><i class="bi bi-cash-stack text-success me-2"></i>Master Komponen Gaji</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola kamus komponen pendapatan dan potongan untuk *Payroll* Guru & Staf.</p>
        </div>
        
        <div class="d-flex gap-2">
            <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 mb-0 bg-white p-2 rounded border shadow-sm">
                <label class="form-label mb-0 fw-medium text-nowrap text-muted" style="font-size: 13px;"><i class="bi bi-funnel me-1"></i>Tahun Ajaran:</label>
                <select name="tahun_ajaran_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()" style="min-width: 180px; font-size: 13px;">
                    <option value="">-- Pilih Tahun --</option>
                    @foreach($tahunAjarans as $ta)
                        <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                            {{ $ta->tahun_ajaran_hijriyah }} H ({{ $ta->status_akademik == 'aktif' ? 'Aktif' : 'Riwayat' }})
                        </option>
                    @endforeach
                </select>
            </form>

            <button type="button" class="btn btn-primary d-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambah">
                <i class="bi bi-plus-circle"></i> Komponen Baru
            </button>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm mb-4">
            <ul class="mb-0 fw-medium">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @php
        $totalPemasukan = isset($kategoris) ? $kategoris->where('sifat', 'pemasukan')->count() : 0;
        $totalPotongan = isset($kategoris) ? $kategoris->where('sifat', 'potongan')->count() : 0;
    @endphp

    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="card shadow-sm border-0 border-start border-success" style="border-left-width: 4px !important;">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="bg-success bg-opacity-10 text-success p-3 rounded-3 me-3"><i class="bi bi-box-arrow-in-down fs-3"></i></div>
                    <div>
                        <div class="text-muted fw-bold" style="font-size: 11px;">TOTAL KOMPONEN PEMASUKAN (+)</div>
                        <h4 class="mb-0 fw-bold text-dark">{{ $totalPemasukan }} Item</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm border-0 border-start border-danger" style="border-left-width: 4px !important;">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="bg-danger bg-opacity-10 text-danger p-3 rounded-3 me-3"><i class="bi bi-box-arrow-up fs-3"></i></div>
                    <div>
                        <div class="text-muted fw-bold" style="font-size: 11px;">TOTAL KOMPONEN POTONGAN (-)</div>
                        <h4 class="mb-0 fw-bold text-dark">{{ $totalPotongan }} Item</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
            <h6 class="mb-0 fw-bold">Daftar Kamus Komponen Periode Terpilih</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light text-secondary" style="font-size: 12px;">
                        <tr>
                            <th class="text-center" width="5%">NO</th>
                            <th width="25%">NAMA KOMPONEN</th>
                            <th width="12%">SIFAT</th>
                            <th width="20%">TIPE & SUMBER</th>
                            <th width="20%">NOMINAL DASAR</th>
                            <th class="text-center" width="18%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($kategoris as $index => $item)
                            <tr>
                                <td class="text-center text-muted">{{ $index + 1 }}</td>
                                <td>
                                    <span class="fw-bold text-dark d-block">{{ $item->nama }}</span>
                                    
                                    @if($item->peruntukan == 'guru')
                                        <span class="badge bg-primary bg-opacity-10 text-primary border border-primary mt-1" style="font-size: 9px;"><i class="bi bi-person-workspace me-1"></i>Khusus Guru</span>
                                    @elseif($item->peruntukan == 'staff')
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary mt-1" style="font-size: 9px;"><i class="bi bi-person-square me-1"></i>Khusus Staff</span>
                                    @else
                                        <span class="badge bg-success bg-opacity-10 text-success border border-success mt-1" style="font-size: 9px;"><i class="bi bi-people me-1"></i>Semua Pegawai</span>
                                    @endif
                                    
                                </td>
                                <td>
                                    @if($item->sifat == 'pemasukan')
                                        <span class="badge bg-success bg-opacity-10 text-success border border-success tipe-badge"><i class="bi bi-plus-circle me-1"></i>Pemasukan</span>
                                    @else
                                        <span class="badge bg-danger bg-opacity-10 text-danger border border-danger tipe-badge"><i class="bi bi-dash-circle me-1"></i>Potongan</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="d-block fw-medium {{ $item->tipe_hitungan == 'dinamis' ? 'text-warning text-dark' : 'text-dark' }}" style="font-size: 13px;">
                                        {{ ucfirst($item->tipe_hitungan) }}
                                    </span>
                                    
                                    @if($item->sumber_otomasi == 'manual')
                                        <small class="badge bg-secondary" style="font-size: 9px;"><i class="bi bi-pencil-square me-1"></i>Input Manual</small>
                                    @elseif($item->sumber_otomasi == 'jadwal_mapel')
                                        <small class="badge bg-primary" style="font-size: 9px;"><i class="bi bi-calendar-range me-1"></i>Auto: Jadwal Mengajar</small>
                                    @elseif($item->sumber_otomasi == 'jabatan')
                                        <small class="badge bg-info text-dark" style="font-size: 9px;"><i class="bi bi-person-badge me-1"></i>Auto: Jabatan Struktural</small>
                                    @endif
                                </td>
                                <td class="fw-bold {{ $item->sifat == 'pemasukan' ? 'text-success' : 'text-danger' }}">
                                    @if($item->nominal_dasar > 0)
                                        {{ $item->sifat == 'pemasukan' ? '+' : '-' }} Rp {{ number_format($item->nominal_dasar, 0, ',', '.') }}
                                        @if($item->tipe_hitungan == 'dinamis')
                                            <span class="text-muted fw-normal" style="font-size: 11px;">/ Satuan</span>
                                        @endif
                                    @else
                                        <span class="text-muted fw-medium" style="font-size: 12px;">Custom / Beda-beda</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-outline-primary me-1" title="Edit" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $item->id }}">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    
                                    <form action="{{ route('admin.keuangan.gaji.kategori.destroy', $item->id) }}" method="POST" id="form-delete-{{ $item->id }}" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-outline-danger" title="Hapus" onclick="confirmDelete({{ $item->id }}, '{{ $item->nama }}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>

                            <div class="modal fade" id="modalEdit{{ $item->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                    <div class="modal-content border-0 shadow">
                                        <form action="{{ route('admin.keuangan.gaji.kategori.update', $item->id) }}" method="POST">
                                            @csrf @method('PUT')
                                            <div class="modal-header bg-light border-bottom-0">
                                                <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-pencil-square me-2"></i>Edit Komponen</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body p-4 text-start">
                                                <div class="row mb-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-medium">Tahun Ajaran <span class="text-danger">*</span></label>
                                                        <select class="form-select bg-light fw-bold" name="tahun_ajaran_id" required>
                                                            @foreach($tahunAjarans as $ta)
                                                                <option value="{{ $ta->id }}" {{ $item->tahun_ajaran_id == $ta->id ? 'selected' : '' }}>
                                                                    {{ $ta->tahun_ajaran_hijriyah }} H
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-bold text-primary">Integrasi / Sumber Otomasi <span class="text-danger">*</span></label>
                                                        <select class="form-select border-primary sumber-otomasi-select" name="sumber_otomasi" required>
                                                            <option value="manual" {{ $item->sumber_otomasi == 'manual' ? 'selected' : '' }}>1. Input Manual Biasa (Tidak terintegrasi)</option>
                                                            <option value="jadwal_mapel" {{ $item->sumber_otomasi == 'jadwal_mapel' ? 'selected' : '' }}>2. Otomatis: Jadwal Mengajar</option>
                                                            <option value="jabatan" {{ $item->sumber_otomasi == 'jabatan' ? 'selected' : '' }}>3. Otomatis: Jabatan Struktural</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-md-12 dynamic-input-group container-nama-manual {{ $item->sumber_otomasi == 'jabatan' ? 'd-none' : '' }}">
                                                        <label class="form-label fw-medium">Nama Komponen <span class="text-danger">*</span></label>
                                                        <input type="text" class="form-control input-nama-manual" name="nama" value="{{ $item->nama }}" placeholder="Contoh: Honor Mengajar / Potongan Terlambat" {{ $item->sumber_otomasi != 'jabatan' ? 'required' : '' }}>
                                                    </div>
                                                    
                                                    <div class="col-md-12 dynamic-input-group container-nama-jabatan {{ $item->sumber_otomasi == 'jabatan' ? '' : 'd-none' }}">
                                                        <label class="form-label fw-medium">Pilih Jabatan Struktural <span class="text-danger">*</span></label>
                                                        <select class="form-select select-jabatan" name="integration_id" {{ $item->sumber_otomasi == 'jabatan' ? 'required' : '' }}>
                                                            <option value="">-- Pilih Jabatan --</option>
                                                            @foreach($jabatans as $jabatan)
                                                                <option value="{{ $jabatan->id }}" data-nama="Tunjangan Jabatan - {{ $jabatan->nama_jabatan }}" {{ $item->integration_id == $jabatan->id ? 'selected' : '' }}>
                                                                    {{ $jabatan->nama_jabatan }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <small class="text-muted mt-1 d-block" style="font-size: 11px;">Nama komponen otomatis menyesuaikan pilihan jabatan.</small>
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label fw-medium">Target Penerima (Peruntukan) <span class="text-danger">*</span></label>
                                                    <select class="form-select" name="peruntukan" required>
                                                        <option value="semua" {{ $item->peruntukan == 'semua' ? 'selected' : '' }}>Berlaku untuk Semua (Guru & Staff)</option>
                                                        <option value="guru" {{ $item->peruntukan == 'guru' ? 'selected' : '' }}>Khusus Guru Saja</option>
                                                        <option value="staff" {{ $item->peruntukan == 'staff' ? 'selected' : '' }}>Khusus Staff Saja</option>
                                                    </select>
                                                    <small class="text-muted mt-1 d-block" style="font-size: 11px;">Komponen ini akan disembunyikan dari profil pegawai yang tidak sesuai peruntukan.</small>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-medium">Sifat Komponen <span class="text-danger">*</span></label>
                                                        <select class="form-select" name="sifat" required>
                                                            <option value="pemasukan" {{ $item->sifat == 'pemasukan' ? 'selected' : '' }}>Pendapatan (+)</option>
                                                            <option value="potongan" {{ $item->sifat == 'potongan' ? 'selected' : '' }}>Potongan (-)</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-medium">Tipe Hitungan <span class="text-danger">*</span></label>
                                                        <select class="form-select" name="tipe_hitungan" required>
                                                            <option value="statis" {{ $item->tipe_hitungan == 'statis' ? 'selected' : '' }}>Statis / Tetap (Per Bulan)</option>
                                                            <option value="dinamis" {{ $item->tipe_hitungan == 'dinamis' ? 'selected' : '' }}>Dinamis (Bisa Dikali)</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                                <div class="row mb-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-medium">Tarif / Nominal Dasar (Rp) <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <span class="input-group-text bg-light fw-bold">Rp</span>
                                                            <input type="number" class="form-control fw-bold text-success" name="nominal_dasar" value="{{ $item->nominal_dasar }}" required min="0">
                                                        </div>
                                                        <small class="text-muted" style="font-size: 11px;">Isi "0" jika nominal beda-beda tiap orang.</small>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="form-label fw-medium">Keterangan Singkat</label>
                                                        <input type="text" class="form-control" name="keterangan" value="{{ $item->keterangan }}" placeholder="Opsional...">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer bg-light border-top-0">
                                                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                                                <button type="submit" class="btn btn-primary btn-sm fw-bold">Simpan Perubahan</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-3 opacity-50"></i>
                                    Belum ada komponen gaji untuk Tahun Ajaran ini.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambah" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow">
            <form action="{{ route('admin.keuangan.gaji.kategori.store') }}" method="POST">
                @csrf
                <div class="modal-header bg-primary text-white border-bottom-0">
                    <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-plus-circle me-2"></i>Komponen Gaji Baru</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 text-start">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Tahun Ajaran <span class="text-danger">*</span></label>
                            <select class="form-select bg-light fw-bold" name="tahun_ajaran_id" required>
                                @foreach($tahunAjarans as $ta)
                                    <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                                        {{ $ta->tahun_ajaran_hijriyah }} H
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-primary">Integrasi / Sumber Otomasi <span class="text-danger">*</span></label>
                            <select class="form-select border-primary sumber-otomasi-select" name="sumber_otomasi" required>
                                <option value="manual">1. Input Manual Biasa (Tidak terintegrasi)</option>
                                <option value="jadwal_mapel">2. Otomatis: Jadwal Mengajar</option>
                                <option value="jabatan">3. Otomatis: Jabatan Struktural</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-12 dynamic-input-group container-nama-manual">
                            <label class="form-label fw-medium">Nama Komponen <span class="text-danger">*</span></label>
                            <input type="text" class="form-control input-nama-manual" name="nama" placeholder="Contoh: Honor Mengajar / Potongan Terlambat" required>
                        </div>
                        
                        <div class="col-md-12 dynamic-input-group d-none container-nama-jabatan">
                            <label class="form-label fw-medium">Pilih Jabatan Struktural <span class="text-danger">*</span></label>
                            <select class="form-select select-jabatan" name="integration_id">
                                <option value="">-- Pilih Jabatan --</option>
                                @foreach($jabatans as $jabatan)
                                    <option value="{{ $jabatan->id }}" data-nama="Tunjangan Jabatan - {{ $jabatan->nama_jabatan }}">
                                        {{ $jabatan->nama_jabatan }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted mt-1 d-block" style="font-size: 11px;">Nama komponen akan otomatis disimpan sebagai "Tunjangan Jabatan - [Nama Jabatan]".</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-medium">Target Penerima (Peruntukan) <span class="text-danger">*</span></label>
                        <select class="form-select" name="peruntukan" required>
                            <option value="semua">Berlaku untuk Semua (Guru & Staff)</option>
                            <option value="guru">Khusus Guru Saja</option>
                            <option value="staff">Khusus Staff Saja</option>
                        </select>
                        <small class="text-muted mt-1 d-block" style="font-size: 11px;">Komponen ini akan disembunyikan dari profil pegawai yang tidak sesuai peruntukan.</small>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Sifat Komponen <span class="text-danger">*</span></label>
                            <select class="form-select" name="sifat" required>
                                <option value="pemasukan">Pendapatan (+)</option>
                                <option value="potongan">Potongan (-)</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Tipe Hitungan <span class="text-danger">*</span></label>
                            <select class="form-select" name="tipe_hitungan" required>
                                <option value="statis">Statis / Tetap (Per Bulan)</option>
                                <option value="dinamis">Dinamis (Bisa Dikali)</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Tarif / Nominal Dasar (Rp) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light fw-bold">Rp</span>
                                <input type="number" class="form-control fw-bold text-success" name="nominal_dasar" placeholder="0" required min="0" value="0">
                            </div>
                            <small class="text-muted" style="font-size: 11px;">Isi "0" jika nominal beda-beda tiap orang.</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Keterangan Singkat</label>
                            <input type="text" class="form-control" name="keterangan" placeholder="Opsional...">
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light border-top-0">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm fw-bold">Simpan Komponen</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        
        document.addEventListener('change', function(e) {
            
            if (e.target && e.target.classList.contains('sumber-otomasi-select')) {
                let modal = e.target.closest('.modal-content');
                let containerManual = modal.querySelector('.container-nama-manual');
                let inputManual = modal.querySelector('.input-nama-manual');
                let containerJabatan = modal.querySelector('.container-nama-jabatan');
                let selectJabatan = modal.querySelector('.select-jabatan');
                
                if (e.target.value === 'jabatan') {
                    containerJabatan.classList.remove('d-none');
                    selectJabatan.required = true;
                    
                    containerManual.classList.add('d-none');
                    inputManual.required = false;
                    
                    if(selectJabatan.options[selectJabatan.selectedIndex] && selectJabatan.value) {
                        inputManual.value = selectJabatan.options[selectJabatan.selectedIndex].getAttribute('data-nama');
                    }
                } else {
                    containerManual.classList.remove('d-none');
                    inputManual.required = true;
                    
                    if(modal.closest('#modalTambah')) {
                        inputManual.value = ''; 
                    }
                    
                    containerJabatan.classList.add('d-none');
                    selectJabatan.required = false;
                    selectJabatan.value = '';
                }
            }
            
            if (e.target && e.target.classList.contains('select-jabatan')) {
                let modal = e.target.closest('.modal-content');
                let inputManual = modal.querySelector('.input-nama-manual');
                
                if(e.target.value) {
                    inputManual.value = e.target.options[e.target.selectedIndex].getAttribute('data-nama');
                } else {
                    inputManual.value = '';
                }
            }
        });

        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2000 });
        @endif
    });

    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus Komponen?',
            text: "Anda akan menghapus " + nama + ".",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/kategori/index.blade.php`
```php
{{-- resources/views/admin/keuangan/kategori/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Kategori Keuangan Siswa')

@push('styles')
<style>
    .nav-pills .nav-link { transition: all 0.3s ease; color: #495057; }
    .nav-pills .nav-link:hover { background-color: #f8f9fa; }
    .nav-pills .nav-link.active {
        font-weight: bold; background-color: #0d6efd !important; color: #ffffff !important; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Pengaturan Keuangan - <span class="text-primary">{{ $jenjang->nama_jenjang ?? 'Jenjang' }}</span></h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola Kategori Tagihan dan Penetapan Tarif Pembayaran Siswa.</p>
        </div>
    </div>

    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex" role="tablist">
            <li class="nav-item flex-fill text-center">
                <a href="{{ route('admin.keuangan.kategori', $jenjang->id) }}" class="nav-link active w-100 mb-0 py-2">
                    <i class="bi bi-tags me-1"></i> 1. Master Kategori Pembayaran
                </a>
            </li>
            <li class="nav-item flex-fill text-center">
                <a href="{{ route('admin.keuangan.tarif', $jenjang->id) }}" class="nav-link w-100 mb-0 py-2 text-dark">
                    <i class="bi bi-cash-coin me-1"></i> 2. Penetapan Tarif & Tagihan
                </a>
            </li>
        </ul>
    </div>

    @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm">
            <ul class="mb-0 fw-medium">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
            <h6 class="card-title mb-0 fw-bold">Daftar Kategori Pembayaran</h6>
            <button class="btn btn-primary btn-sm d-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahKategori">
                <i class="bi bi-plus-circle"></i> Tambah Kategori
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; width: 30%">NAMA KATEGORI</th>
                            <th class="text-secondary" style="font-size: 12px; width: 20%">TIPE SIKLUS TAGIHAN</th>
                            <th class="text-secondary" style="font-size: 12px;">KETERANGAN</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 12%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($kategoris as $index => $kat)
                        <tr>
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td class="fw-bold text-primary">{{ $kat->nama }}</td>
                            <td>
                                <span class="badge bg-secondary text-secondary bg-opacity-10 border border-secondary px-2 py-1">{{ $kat->tipe }}</span>
                            </td>
                            <td class="text-muted" style="font-size: 13px;">{{ $kat->keterangan ?? '-' }}</td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#modalEdit{{ $kat->id }}" title="Edit Data">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger" title="Hapus Data" onclick="confirmDelete({{ $kat->id }}, '{{ $kat->nama }}')">
                                    <i class="bi bi-trash"></i>
                                </button>
                                <form id="delete-form-{{ $kat->id }}" action="{{ route('admin.keuangan.kategori.destroy', $kat->id) }}" method="POST" class="d-none">
                                    @csrf @method('DELETE')
                                </form>
                            </td>
                        </tr>

                        <div class="modal fade" id="modalEdit{{ $kat->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header bg-light border-bottom-0">
                                        <h5 class="modal-title fw-bold" style="font-size: 16px;">Edit Kategori</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form action="{{ route('admin.keuangan.kategori.update', $kat->id) }}" method="POST">
                                        @csrf @method('PUT')
                                        <div class="modal-body p-4 text-start">
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Nama Kategori <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="nama" value="{{ $kat->nama }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Tipe / Siklus Tagihan <span class="text-danger">*</span></label>
                                                <select class="form-select" name="tipe" required>
                                                    <option value="Harian" {{ $kat->tipe == 'Harian' ? 'selected' : '' }}>Harian (Siklus Per Hari, cnth: Infaq)</option>
                                                    <option value="Mingguan" {{ $kat->tipe == 'Mingguan' ? 'selected' : '' }}>Mingguan (Siklus Per Minggu)</option>
                                                    <option value="Bulanan" {{ $kat->tipe == 'Bulanan' ? 'selected' : '' }}>Bulanan (Siklus Per Bulan, cnth: SPP)</option>
                                                    <option value="Per Periode" {{ $kat->tipe == 'Per Periode' ? 'selected' : '' }}>Per Periode (Siklus Per Semester/Caturwulan)</option>
                                                    <option value="Tahunan" {{ $kat->tipe == 'Tahunan' ? 'selected' : '' }}>Tahunan (Siklus Sekali Setahun)</option>
                                                    <option value="Sekali Bayar" {{ $kat->tipe == 'Sekali Bayar' ? 'selected' : '' }}>Sekali Bayar (Awal Masuk, cnth: Bangunan)</option>
                                                    <option value="Insidental" {{ $kat->tipe == 'Insidental' ? 'selected' : '' }}>Insidental / Bebas (Tidak Terikat Waktu)</option>
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Keterangan</label>
                                                <textarea class="form-control" name="keterangan" rows="2">{{ $kat->keterangan }}</textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-light">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="bi bi-tags fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada kategori keuangan yang ditambahkan.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambahKategori" tabindex="-1" 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 border-bottom-0">
                <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-plus-circle me-2"></i>Tambah Kategori</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.keuangan.kategori.store', $jenjang->id) }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama Kategori <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nama" placeholder="Contoh: SPP Bulanan" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Tipe / Siklus Tagihan <span class="text-danger">*</span></label>
                        <select class="form-select" name="tipe" required>
                            <option value="">-- Pilih Tipe Tagihan --</option>
                            <option value="Harian">Harian (Siklus Per Hari, cnth: Infaq)</option>
                            <option value="Mingguan">Mingguan (Siklus Per Minggu, cnth: Tabungan)</option>
                            <option value="Bulanan">Bulanan (Siklus Per Bulan, cnth: SPP)</option>
                            <option value="Per Periode">Per Periode (Siklus Per Semester/Caturwulan)</option>
                            <option value="Tahunan">Tahunan (Siklus Sekali Setahun)</option>
                            <option value="Sekali Bayar">Sekali Bayar (Masuk Awal, cnth: Bangunan)</option>
                            <option value="Insidental">Insidental / Bebas (Tidak Terikat Waktu, cnth: Seragam)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Keterangan</label>
                        <textarea class="form-control" name="keterangan" rows="2" placeholder="Penjelasan pembayaran ini..."></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-4 fw-bold">Simpan Kategori</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus ' + nama + '?',
            text: "Kategori yang dihapus akan menghapus seluruh data tarif yang terkait dengan kategori ini!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2000 });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/tabungan/cetak_koran.blade.php`
```php
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Rekening Koran - {{ $nasabah->nama_lengkap }}</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: Arial, sans-serif; font-size: 12px; color: #333; margin: 0; padding: 0; }
        
        /* PENGATURAN KERTAS A4 LANDSCAPE */
        @page { size: A4 landscape; margin: 15mm; }
        @media print {
            body { padding: 0; }
        }

        /* KOP SURAT */
        .kop-surat { display: flex; align-items: center; border-bottom: 3px double #000; padding-bottom: 10px; margin-bottom: 15px; }
        .kop-logo { width: 70px; height: 70px; object-fit: contain; margin-right: 15px; }
        .kop-text { flex: 1; text-align: center; }
        .kop-text h2 { margin: 0; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-family: Arial, sans-serif;}
        .kop-text p { margin: 2px 0; font-size: 11px; font-family: Arial, sans-serif; }
        
        /* JUDUL DOKUMEN */
        .document-title { text-align: center; font-size: 16px; font-weight: bold; text-decoration: underline; margin-bottom: 5px; letter-spacing: 1px;}
        .document-subtitle { text-align: center; font-size: 12px; margin-bottom: 20px; }

        .info-table { width: 100%; margin-bottom: 20px; font-size: 12px; }
        .info-table td { padding: 3px; }
        
        /* TABEL DATA A4 LANDSCAPE FIT */
        .data-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; }
        .data-table th, .data-table td { border: 1px solid #aaa; padding: 8px 6px; text-align: left; word-wrap: break-word; font-size: 11px; }
        .data-table th { background-color: #f0f0f0; text-align: center; font-size: 12px; }
        
        .text-right { text-align: right !important; }
        .text-center { text-align: center !important; }
    </style>
</head>
<body onload="window.print()">

    @php
        $profilSekolah = \App\Models\ProfilSekolah::first();
        $logoUrl = $profilSekolah && $profilSekolah->logo_path ? asset('storage/'.$profilSekolah->logo_path) : '';
        $namaMadrasah = $profilSekolah->nama_madrasah ?? 'Madrasah Al Idrus';
        $alamatMadrasah = $profilSekolah->alamat ?? '';
        $kontakMadrasah = "Telp/WA: " . ($profilSekolah->telepon ?? '-') . " | Email: " . ($profilSekolah->email ?? '-');
    @endphp

    <div class="kop-surat">
        @if($logoUrl)
            <img src="{{ $logoUrl }}" class="kop-logo" alt="Logo">
        @endif
        <div class="kop-text">
            <h2>{{ $namaMadrasah }}</h2>
            <p>{{ $alamatMadrasah }}</p>
            <p>{{ $kontakMadrasah }}</p>
        </div>
    </div>

    <div class="document-title">REKENING KORAN TABUNGAN MADRASAH</div>
    <div class="document-subtitle">Periode: {{ \Carbon\Carbon::parse($startDate)->format('d/m/Y') }} s/d {{ \Carbon\Carbon::parse($endDate)->format('d/m/Y') }}</div>

    <table class="info-table">
        <tr>
            <td width="15%"><strong>Nama Nasabah</strong></td><td width="35%">: {{ $nasabah->nama_lengkap }}</td>
            <td width="15%"><strong>No. Rekening</strong></td><td width="35%">: {{ $nasabah->no_rekening }}</td>
        </tr>
        <tr>
            <td><strong>Status/Kategori</strong></td><td>: {{ $nasabah->entitas_profil }}</td>
            <td><strong>Tanggal Cetak</strong></td><td>: {{ now()->format('d/m/Y H:i') }}</td>
        </tr>
    </table>

    <table class="data-table">
        <thead>
            <tr>
                <th rowspan="2" width="10%">TANGGAL</th>
                <th rowspan="2" width="30%">KETERANGAN</th>
                <th colspan="2">MUTASI TABUNGAN</th>
                <th colspan="2">SALDO AKHIR TERCATAT</th>
            </tr>
            <tr>
                <th width="15%">DEBIT (Tarik)</th>
                <th width="15%">KREDIT (Setor)</th>
                <th width="15%">SYARIAH</th>
                <th width="15%">JARIYAH</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background:#fafafa;">
                <td colspan="4" class="text-right" style="font-style:italic;">Saldo Awal (Sebelum Periode Cetak):</td>
                <td class="text-right"><strong>Rp {{ number_format($saldoAwalSyariah, 0, ',', '.') }}</strong></td>
                <td class="text-right"><strong>Rp {{ number_format($saldoAwalJariyah, 0, ',', '.') }}</strong></td>
            </tr>
            
            @php 
                $runSya = $saldoAwalSyariah; 
                $runJar = $saldoAwalJariyah; 
            @endphp
            
            @forelse($mutasi as $m)
                @php
                    if($m->jenis_tabungan == 'Syariah') {
                        $m->jenis_mutasi == 'Setor' ? $runSya += $m->nominal : $runSya -= $m->nominal;
                    } else {
                        $m->jenis_mutasi == 'Setor' ? $runJar += $m->nominal : $runJar -= $m->nominal;
                    }
                @endphp
                <tr>
                    <td class="text-center">{{ \Carbon\Carbon::parse($m->tanggal_transaksi)->format('d/m/Y') }}</td>
                    <td>{{ $m->keterangan }}<br><small style="color:#666;">(Tab. {{ $m->jenis_tabungan }})</small></td>
                    <td class="text-right">{{ $m->jenis_mutasi == 'Tarik' ? 'Rp '.number_format($m->nominal, 0, ',', '.') : '-' }}</td>
                    <td class="text-right">{{ $m->jenis_mutasi == 'Setor' ? 'Rp '.number_format($m->nominal, 0, ',', '.') : '-' }}</td>
                    <td class="text-right">Rp {{ number_format($runSya, 0, ',', '.') }}</td>
                    <td class="text-right">Rp {{ number_format($runJar, 0, ',', '.') }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="text-center" style="padding:15px; color:#666;">Tidak ada transaksi pada periode ini.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <div style="float: right; text-align: center; width: 250px; margin-top: 30px;">
        <p>Petugas / Bendahara,</p>
        <br><br><br>
        <p style="text-decoration: underline; font-weight: bold; margin-bottom:0;">{{ Auth::user()->name ?? 'Administrator' }}</p>
    </div>
</body>
</html>
```

## File: `resources/views/admin/keuangan/tabungan/index.blade.php`
```php
{{-- resources/views/admin/keuangan/tabungan/index.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'Daftar Buku Rekening Tabungan')

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold text-success"><i class="bi bi-piggy-bank me-2"></i>Keuangan Tabungan</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola buku rekening tabungan syariah dan jariyah nasabah.</p>
        </div>
        <button type="button" class="btn btn-success btn-sm shadow-sm d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#modalBukaRekening">
            <i class="bi bi-plus-circle"></i> Buka Rekening Baru
        </button>
    </div>

    <div class="row mb-4 g-3">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm border-start border-primary border-4 h-100">
                <div class="card-body">
                    <p class="text-muted fw-bold mb-1" style="font-size: 12px;">TOTAL REKENING AKTIF</p>
                    <h4 class="fw-bold mb-0 text-dark">{{ $nasabahs->count() }} <span style="font-size: 14px;" class="text-muted fw-normal">Nasabah</span></h4>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm border-start border-info border-4 h-100 bg-info bg-opacity-10">
                <div class="card-body">
                    <p class="text-info fw-bold mb-1" style="font-size: 12px;">TOTAL SALDO SYARIAH</p>
                    <h4 class="fw-bold mb-0 text-info">Rp {{ number_format($nasabahs->sum('saldo_syariah'), 0, ',', '.') }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm border-start border-success border-4 h-100 bg-success bg-opacity-10">
                <div class="card-body">
                    <p class="text-success fw-bold mb-1" style="font-size: 12px;">TOTAL SALDO JARIYAH</p>
                    <h4 class="fw-bold mb-0 text-success">Rp {{ number_format($nasabahs->sum('saldo_jariyah'), 0, ',', '.') }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-wallet2 text-primary me-2"></i>Daftar Buku Rekening</h6>
            
            <div class="input-group input-group-sm" style="width: 280px;">
                <span class="input-group-text bg-light border-end-0"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama / No. Rekening..." onkeyup="searchNasabah(this)" aria-label="Cari Nasabah">
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%;">NO</th>
                            <th class="text-secondary" style="font-size: 12px;">PROFIL NASABAH</th>
                            <th class="text-secondary" style="font-size: 12px;">KATEGORI & NO. REK</th>
                            <th class="text-secondary" style="font-size: 12px;">SALDO SYARIAH</th>
                            <th class="text-secondary" style="font-size: 12px;">SALDO JARIYAH</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 10%;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-nasabah">
                        @forelse($nasabahs as $index => $n)
                        <tr class="row-nasabah">
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <span class="fw-bold text-dark d-block" style="font-size: 14px;">{{ $n->nama_lengkap }}</span>
                                <span class="text-muted" style="font-size: 12px;"><i class="bi bi-telephone me-1"></i>{{ $n->no_hp ?? '-' }}</span>
                            </td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary d-inline-block mb-1" style="font-size: 10px;">{{ $n->entitas_profil }}</span>
                                <span class="d-block fw-bold font-monospace" style="font-size: 14px; letter-spacing: 1px;">{{ $n->no_rekening }}</span>
                            </td>
                            <td>
                                <span class="fw-bold text-info" style="font-size: 14px;">Rp {{ number_format($n->saldo_syariah, 0, ',', '.') }}</span>
                            </td>
                            <td>
                                <span class="fw-bold text-success" style="font-size: 14px;">Rp {{ number_format($n->saldo_jariyah, 0, ',', '.') }}</span>
                            </td>
                            <td class="text-center">
                                <a href="{{ route('admin.tabungan.show', $n->id) }}" class="btn btn-sm btn-primary shadow-sm" title="Buka Buku Tabungan">
                                    <i class="bi bi-journal-text me-1"></i> Detail
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-journal-x fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada buku rekening tabungan.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalBukaRekening" tabindex="-1" aria-labelledby="modalBukaRekeningLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('admin.tabungan.store') }}" method="POST">
      @csrf
      <div class="modal-content">
        <div class="modal-header bg-success text-white">
          <h5 class="modal-title" id="modalBukaRekeningLabel"><i class="bi bi-journal-plus me-2"></i>Buka Rekening Baru</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body p-4">
            
            <div class="mb-3">
                <label class="form-label fw-bold">Pilih Kategori Nasabah</label>
                <select class="form-select border-success shadow-sm" name="kode_kategori" id="kode_kategori" required onchange="toggleFormKategori()">
                    <option value="">-- Pilih Kategori --</option>
                    <option value="02">Siswa / Santri Madrasah (Kode: 02)</option>
                    <option value="01">Guru / Staff Madrasah (Kode: 01)</option>
                    <option value="03">Masyarakat Umum (Kode: 03)</option>
                </select>
            </div>

            <div id="form-pegawai" class="d-none">
                <div class="mb-3">
                    <label class="form-label fw-medium">Jenis Kepegawaian</label>
                    <select class="form-select" name="jenis_pegawai" id="jenis_pegawai" onchange="togglePegawai()">
                        <option value="guru">Tenaga Pendidik (Guru)</option>
                        <option value="staff">Tenaga Kependidikan (Staff)</option>
                    </select>
                </div>
                <div class="mb-3" id="select-guru">
                    <label class="form-label fw-medium">Pilih Guru</label>
                    <select class="form-select" name="guru_id">
                        <option value="">-- Pilih Guru --</option>
                        @foreach($gurus as $g) <option value="{{ $g->id }}">{{ $g->nama_lengkap }}</option> @endforeach
                    </select>
                </div>
                <div class="mb-3 d-none" id="select-staff">
                    <label class="form-label fw-medium">Pilih Staff</label>
                    <select class="form-select" name="staff_id">
                        <option value="">-- Pilih Staff --</option>
                        @foreach($staffs as $s) <option value="{{ $s->id }}">{{ $s->nama_lengkap }}</option> @endforeach
                    </select>
                </div>
            </div>

            <div id="form-siswa" class="d-none">
                <div class="mb-3">
                    <label class="form-label fw-medium">Pilih Siswa/Santri</label>
                    <select class="form-select" name="siswa_id">
                        <option value="">-- Pilih Siswa --</option>
                        @foreach($siswas as $s) 
                            <option value="{{ $s->id }}">{{ $s->nama_lengkap }} ({{ $s->nis ?? '-' }})</option> 
                        @endforeach
                    </select>
                    <div class="form-text text-danger" style="font-size:11px;">*Hanya siswa yang belum memiliki tabungan yang muncul.</div>
                </div>
            </div>

            <div id="form-umum" class="d-none">
                <div class="mb-3">
                    <label class="form-label fw-medium">Nama Lengkap</label>
                    <input type="text" class="form-control" name="nama_lengkap" placeholder="Nama Warga / Nasabah">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-medium">NIK (Nomor Induk Kependudukan)</label>
                    <input type="text" class="form-control" name="nik" placeholder="16 Digit NIK KTP">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-medium">Nomor WhatsApp / HP</label>
                    <input type="text" class="form-control" name="no_hp" placeholder="08xxxxxx">
                </div>
            </div>

        </div>
        <div class="modal-footer bg-light">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-success"><i class="bi bi-save me-1"></i> Buat Rekening</button>
        </div>
      </div>
    </form>
  </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function toggleFormKategori() {
        let val = document.getElementById('kode_kategori').value;
        document.getElementById('form-pegawai').classList.add('d-none');
        document.getElementById('form-siswa').classList.add('d-none');
        document.getElementById('form-umum').classList.add('d-none');

        if(val === '01') document.getElementById('form-pegawai').classList.remove('d-none');
        if(val === '02') document.getElementById('form-siswa').classList.remove('d-none');
        if(val === '03') document.getElementById('form-umum').classList.remove('d-none');
    }

    function togglePegawai() {
        let val = document.getElementById('jenis_pegawai').value;
        document.getElementById('select-guru').classList.add('d-none');
        document.getElementById('select-staff').classList.add('d-none');
        if(val === 'guru') document.getElementById('select-guru').classList.remove('d-none');
        if(val === 'staff') document.getElementById('select-staff').classList.remove('d-none');
    }

    function searchNasabah(input) {
        let filter = input.value.toLowerCase();
        let rows = document.getElementsByClassName('row-nasabah');
        for (let i = 0; i < rows.length; i++) {
            let text = rows[i].textContent.toLowerCase();
            rows[i].style.display = text.includes(filter) ? "" : "none";
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2500 });
        @endif
        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Error!', html: '<ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/tabungan/show.blade.php`
```php
{{-- resources/views/admin/keuangan/tabungan/show.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'Buku Tabungan - ' . $nasabah->nama_lengkap)

@push('styles')
<style>
    .mutasi-row:hover { background-color: #f8f9fa; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">

    @php
        $profilSekolah = \App\Models\ProfilSekolah::first();
        $logoUrl = $profilSekolah && $profilSekolah->logo_path ? asset('storage/'.$profilSekolah->logo_path) : '';
        $namaMadrasah = $profilSekolah->nama_madrasah ?? 'Madrasah Al Idrus';
        $alamatMadrasah = $profilSekolah->alamat ?? '';
        $kontakMadrasah = "Telp/WA: " . ($profilSekolah->telepon ?? '-') . " | Email: " . ($profilSekolah->email ?? '-');
        
        if($nasabah->kode_kategori == '02' && $nasabah->siswa && $nasabah->siswa->kelas) {
            $infoNasabah = "Siswa Kelas: " . $nasabah->siswa->kelas->nama_kelas;
        } elseif($nasabah->kode_kategori == '01') {
            $infoNasabah = "Pegawai Madrasah";
        } else {
            $infoNasabah = "Nasabah Umum";
        }

        if (!function_exists('terbilangTabungan')) {
            function terbilangTabungan($angka) {
                $angka = abs($angka);
                $baca = array("", "Satu", "Dua", "Tiga", "Empat", "Lima", "Enam", "Tujuh", "Delapan", "Sembilan", "Sepuluh", "Sebelas");
                $terbilang = "";
                if ($angka < 12) { $terbilang = " " . $baca[$angka]; } 
                else if ($angka < 20) { $terbilang = terbilangTabungan($angka - 10) . " Belas"; } 
                else if ($angka < 100) { $terbilang = terbilangTabungan($angka / 10) . " Puluh" . terbilangTabungan($angka % 10); } 
                else if ($angka < 200) { $terbilang = " Seratus" . terbilangTabungan($angka - 100); } 
                else if ($angka < 1000) { $terbilang = terbilangTabungan($angka / 100) . " Ratus" . terbilangTabungan($angka % 100); } 
                else if ($angka < 2000) { $terbilang = " Seribu" . terbilangTabungan($angka - 1000); } 
                else if ($angka < 1000000) { $terbilang = terbilangTabungan($angka / 1000) . " Ribu" . terbilangTabungan($angka % 1000); } 
                else if ($angka < 1000000000) { $terbilang = terbilangTabungan($angka / 1000000) . " Juta" . terbilangTabungan($angka % 1000000); }
                return $terbilang;
            }
        }
    @endphp

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold"><i class="bi bi-journal-bookmark-fill text-primary me-2"></i>Buku Rekening Nasabah</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Detail profil dan log histori mutasi (Setor/Tarik).</p>
        </div>
        <a href="{{ url()->previous() }}" class="btn btn-outline-secondary btn-sm shadow-sm">
            <i class="bi bi-arrow-left me-1"></i> Kembali
        </a>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center p-4">
                    <img src="https://ui-avatars.com/api/?name={{ urlencode($nasabah->nama_lengkap) }}&background=E3F2FD&color=1565C0&size=100" class="rounded-circle mb-3 shadow-sm" alt="Avatar">
                    <h5 class="fw-bold text-dark mb-1">{{ $nasabah->nama_lengkap }}</h5>
                    <span class="badge bg-primary bg-opacity-10 text-primary border border-primary mb-3">{{ $nasabah->entitas_profil }}</span>
                    
                    <div class="bg-light p-3 rounded text-start mb-3 border border-secondary-subtle">
                        <small class="text-muted d-block fw-bold mb-1" style="font-size: 11px;">NOMOR REKENING:</small>
                        <h5 class="fw-bold font-monospace text-dark mb-2" style="letter-spacing: 2px;">{{ $nasabah->no_rekening }}</h5>
                        <hr class="my-2 border-secondary opacity-25">
                        <div class="d-flex justify-content-between align-items-center mb-1" style="font-size: 12px;">
                            <span class="text-muted"><i class="bi bi-telephone me-1"></i>{{ $nasabah->no_hp ?? '-' }}</span>
                            <span class="text-muted"><i class="bi bi-person-vcard me-1"></i>{{ $nasabah->nik ?? '-' }}</span>
                        </div>

                        @if($nasabah->kode_kategori == '03')
                            <hr class="my-2 border-secondary opacity-25">
                            <div class="d-flex justify-content-between align-items-center mb-1" style="font-size: 12px;">
                                <span class="text-muted"><i class="bi bi-geo-alt me-1"></i> Alamat:</span>
                            </div>
                            <div style="font-size: 11px; line-height:1.4;" class="text-dark mb-2">{{ $nasabah->alamat ?? 'Belum diisi...' }}</div>
                            
                            <div class="d-flex justify-content-between align-items-center" style="font-size: 12px;">
                                <span class="text-muted"><i class="bi bi-file-earmark-person me-1"></i> Dokumen KTP:</span>
                                @if($nasabah->file_ktp)
                                    <a href="{{ asset('storage/nasabah_ktp/' . $nasabah->file_ktp) }}" target="_blank" class="badge bg-info text-decoration-none">Lihat File</a>
                                @else
                                    <span class="badge bg-secondary">Kosong</span>
                                @endif
                            </div>
                            <button class="btn btn-sm btn-outline-primary w-100 mt-3" data-bs-toggle="modal" data-bs-target="#modalProfilUmum" style="font-size: 11px;">
                                <i class="bi bi-pencil-square me-1"></i> Lengkapi Alamat & KTP
                            </button>
                        @endif
                    </div>

                    <button class="btn btn-success w-100 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTransaksi">
                        <i class="bi bi-cash-coin me-2"></i> Input Transaksi Tunai
                    </button>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="row g-3 h-100">
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm bg-primary text-white h-100" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
                        <div class="card-body p-4 d-flex flex-column justify-content-center">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold mb-0 text-white-50">SALDO TABUNGAN SYARIAH</h6>
                                <i class="bi bi-wallet2 fs-2 opacity-50"></i>
                            </div>
                            <h2 class="fw-bold mb-0 font-monospace">Rp {{ number_format($nasabah->saldo_syariah, 0, ',', '.') }}</h2>
                            <p class="text-white-50 mt-2 mb-0" style="font-size: 12px;">Dapat ditarik sewaktu-waktu untuk keperluan pribadi.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm bg-success text-white h-100" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                        <div class="card-body p-4 d-flex flex-column justify-content-center">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="fw-bold mb-0 text-white-50">SALDO TABUNGAN JARIYAH</h6>
                                <i class="bi bi-heart-fill fs-2 opacity-50"></i>
                            </div>
                            <h2 class="fw-bold mb-0 font-monospace">Rp {{ number_format($nasabah->saldo_jariyah, 0, ',', '.') }}</h2>
                            <p class="text-white-50 mt-2 mb-0" style="font-size: 12px;">Disalurkan melalui akad wakaf/infaq pembangunan.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex flex-wrap justify-content-between align-items-center gap-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-clock-history me-2"></i>Histori Transaksi (Mutasi)</h6>
            
            <div class="d-flex flex-wrap align-items-center gap-2">
                <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 m-0">
                    <input type="date" name="start_date" class="form-control form-control-sm border-secondary-subtle" value="{{ request('start_date') }}" required title="Dari Tanggal">
                    <span class="text-muted" style="font-size: 12px;">s/d</span>
                    <input type="date" name="end_date" class="form-control form-control-sm border-secondary-subtle" value="{{ request('end_date') }}" required title="Sampai Tanggal">
                    <button type="submit" class="btn btn-sm btn-primary shadow-sm" title="Terapkan Filter"><i class="bi bi-filter"></i></button>
                    @if(request('start_date'))
                        <a href="{{ url()->current() }}" class="btn btn-sm btn-light border shadow-sm" title="Reset Filter"><i class="bi bi-arrow-clockwise"></i></a>
                    @endif
                </form>

                <div class="border-start ps-2 ms-1 d-flex gap-2">
                    <a href="{{ route('admin.tabungan.cetak_koran', ['id' => $nasabah->id, 'start_date' => request('start_date'), 'end_date' => request('end_date')]) }}" target="_blank" class="btn btn-sm btn-outline-dark shadow-sm">
                        <i class="bi bi-printer me-1"></i> Rekening Koran
                    </a>
                    <a href="{{ route('admin.tabungan.cetak_buku', $nasabah->id) }}" target="_blank" class="btn btn-sm btn-success shadow-sm" onclick="alert('Pilih \'Simpan sebagai PDF\' pada opsi tujuan cetak browser Anda.');">
                        <i class="bi bi-journal-check me-1"></i> Cetak Buku (PDF)
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-secondary ps-3" style="font-size: 12px;">TANGGAL TRANSAKSI</th>
                            <th class="text-secondary" style="font-size: 12px;">JENIS TRANSAKSI</th>
                            <th class="text-secondary" style="font-size: 12px;">KATEGORI</th>
                            <th class="text-secondary text-end" style="font-size: 12px;">NOMINAL</th>
                            <th class="text-secondary" style="font-size: 12px; padding-left:20px;">KETERANGAN</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 140px;">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($nasabah->mutasi as $mutasi)
                        <tr class="mutasi-row">
                            <td class="ps-3">
                                <span class="d-block fw-bold text-dark" style="font-size: 13px;">{{ $mutasi->tanggal_hijriyah }}</span>
                                <span class="text-muted" style="font-size: 11px;">{{ \Carbon\Carbon::parse($mutasi->tanggal_transaksi)->format('d M Y') }} M</span>
                            </td>
                            <td>
                                @if($mutasi->jenis_mutasi == 'Setor')
                                    <span class="badge bg-success bg-opacity-10 text-success border border-success"><i class="bi bi-arrow-down-left-circle me-1"></i>Setoran</span>
                                @else
                                    <span class="badge bg-danger bg-opacity-10 text-danger border border-danger"><i class="bi bi-arrow-up-right-circle me-1"></i>Penarikan</span>
                                @endif
                            </td>
                            <td>
                                <span class="fw-medium text-dark" style="font-size: 13px;">Tabungan {{ $mutasi->jenis_tabungan }}</span>
                            </td>
                            <td class="text-end">
                                <span class="fw-bold font-monospace {{ $mutasi->jenis_mutasi == 'Setor' ? 'text-success' : 'text-danger' }}">
                                    {{ $mutasi->jenis_mutasi == 'Setor' ? '+' : '-' }} Rp {{ number_format($mutasi->nominal, 0, ',', '.') }}
                                </span>
                            </td>
                            <td style="padding-left:20px;">
                                <span class="text-muted d-block text-wrap" style="font-size: 12px; max-width: 250px;">{{ $mutasi->keterangan ?? '-' }}</span>
                            </td>
                            
                            <td class="text-center">
                                <div class="btn-group shadow-sm">
                                    <button type="button" class="btn btn-sm btn-info text-white" title="Cetak Kuitansi" 
                                        onclick="cetakKuitansiTabungan(
                                            'TBG-{{ str_pad($mutasi->id, 5, '0', STR_PAD_LEFT) }}', 
                                            '{{ \Carbon\Carbon::parse($mutasi->tanggal_transaksi)->format('d M Y') }}', 
                                            '{{ $mutasi->tanggal_hijriyah }}', 
                                            '{{ $mutasi->jenis_mutasi }} Tabungan {{ $mutasi->jenis_tabungan }}', 
                                            '{{ $mutasi->nominal }}', 
                                            '{{ trim(terbilangTabungan($mutasi->nominal)) }}',
                                            '{{ $mutasi->jenis_mutasi }}'
                                        )">
                                        <i class="bi bi-printer"></i>
                                    </button>
                                    
                                    <button type="button" class="btn btn-sm btn-warning text-dark" title="Edit Transaksi" data-bs-toggle="modal" data-bs-target="#modalEditTransaksi{{ $mutasi->id }}">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    
                                    <form action="{{ route('admin.tabungan.mutasi.destroy', $mutasi->id) }}" id="form-delete-{{ $mutasi->id }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-danger" title="Hapus Transaksi" onclick="confirmDeleteMutasi({{ $mutasi->id }})">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        <!-- Modal Edit Transaksi Mutasi -->
                        <div class="modal fade" id="modalEditTransaksi{{ $mutasi->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog">
                                <form action="{{ route('admin.tabungan.mutasi.update', $mutasi->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-content border-0 shadow">
                                        <div class="modal-header bg-warning text-dark border-0">
                                            <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square me-2"></i>Edit Mutasi Tabungan</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body p-4 bg-light text-start">
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label class="form-label fw-bold">Jenis Mutasi</label>
                                                    <select class="form-select border-warning shadow-sm fw-bold" name="jenis_mutasi" required>
                                                        <option value="Setor" {{ $mutasi->jenis_mutasi == 'Setor' ? 'selected' : '' }} class="text-success">Setoran (Menabung)</option>
                                                        <option value="Tarik" {{ $mutasi->jenis_mutasi == 'Tarik' ? 'selected' : '' }} class="text-danger">Penarikan (Ambil)</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label fw-bold">Pilih Tabungan</label>
                                                    <select class="form-select border-warning shadow-sm fw-bold" name="jenis_tabungan" required>
                                                        <option value="Syariah" {{ $mutasi->jenis_tabungan == 'Syariah' ? 'selected' : '' }}>Tabungan Syariah</option>
                                                        <option value="Jariyah" {{ $mutasi->jenis_tabungan == 'Jariyah' ? 'selected' : '' }}>Tabungan Jariyah</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Nominal Tunai (Rp)</label>
                                                <div class="input-group input-group-lg shadow-sm">
                                                    <span class="input-group-text bg-white border-warning fw-bold text-dark">Rp</span>
                                                    <input type="number" class="form-control border-warning fw-bold text-dark font-monospace" name="nominal" min="1000" value="{{ (int)$mutasi->nominal }}" required>
                                                </div>
                                                <div class="form-text text-danger" style="font-size: 11px;">*Mengubah nominal akan otomatis mengkalkulasi ulang Saldo Nasabah.</div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Tanggal Transaksi (Masehi)</label>
                                                <input type="date" class="form-control" name="tanggal_transaksi" value="{{ $mutasi->tanggal_transaksi }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Keterangan / Berita Acara</label>
                                                <textarea class="form-control" name="keterangan" rows="2">{{ $mutasi->keterangan }}</textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-white border-top-0">
                                            <button type="button" class="btn btn-secondary shadow-sm" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-warning fw-bold shadow-sm"><i class="bi bi-save me-1"></i> Simpan Perubahan</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-clipboard-x fs-2 d-block mb-2 text-black-50"></i>
                                Belum ada riwayat transaksi mutasi.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<div class="modal fade" id="modalTransaksi" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('admin.tabungan.transaksi', $nasabah->id) }}" method="POST">
      @csrf
      <div class="modal-content border-0 shadow">
        <div class="modal-header bg-primary text-white border-0">
          <h5 class="modal-title fw-bold"><i class="bi bi-cash-stack me-2"></i>Input Transaksi Tunai</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-4 bg-light">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Jenis Mutasi</label>
                    <select class="form-select border-primary shadow-sm fw-bold" name="jenis_mutasi" required>
                        <option value="Setor" class="text-success">Setoran (Menabung)</option>
                        <option value="Tarik" class="text-danger">Penarikan (Ambil)</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold">Pilih Tabungan</label>
                    <select class="form-select border-primary shadow-sm fw-bold" name="jenis_tabungan" required>
                        <option value="Syariah">Tabungan Syariah</option>
                        <option value="Jariyah">Tabungan Jariyah</option>
                    </select>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">Nominal Tunai (Rp)</label>
                <div class="input-group input-group-lg shadow-sm">
                    <span class="input-group-text bg-white border-primary fw-bold text-dark">Rp</span>
                    <input type="number" class="form-control border-primary fw-bold text-dark font-monospace" name="nominal" min="1000" placeholder="0" required>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium">Tanggal Transaksi (Masehi)</label>
                <input type="date" class="form-control" name="tanggal_transaksi" value="{{ date('Y-m-d') }}" required>
            </div>
            <div class="mb-3">
                <label class="form-label fw-medium">Keterangan / Berita Acara</label>
                <textarea class="form-control" name="keterangan" rows="2" placeholder="Catatan opsional... (misal: Setoran via Transfer / Pencairan untuk Wakaf Masjid)"></textarea>
            </div>
        </div>
        <div class="modal-footer bg-white border-top-0">
          <button type="button" class="btn btn-secondary shadow-sm" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary fw-bold shadow-sm"><i class="bi bi-check-circle me-1"></i> Proses Transaksi</button>
        </div>
      </div>
    </form>
  </div>
</div>

@if($nasabah->kode_kategori == '03')
<div class="modal fade" id="modalProfilUmum" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('admin.tabungan.nasabah.update_profil', $nasabah->id) }}" method="POST" enctype="multipart/form-data">
      @csrf
      @method('PUT')
      <div class="modal-content border-0 shadow">
        <div class="modal-header bg-primary text-white border-0">
          <h5 class="modal-title fw-bold" style="font-size:16px;"><i class="bi bi-file-person me-2"></i>Kelengkapan Dokumen KYC</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body p-4 bg-light text-start">
            <div class="mb-3">
                <label class="form-label fw-bold">Alamat Lengkap</label>
                <textarea class="form-control border-primary" name="alamat" rows="3" placeholder="Masukkan alamat domisili nasabah...">{{ $nasabah->alamat }}</textarea>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold">Unggah Scan/Foto KTP</label>
                <input type="file" class="form-control border-primary" name="file_ktp" accept=".jpg,.jpeg,.png,.pdf">
                <div class="form-text text-muted" style="font-size: 11px;">*Format didukung: JPG, PNG, PDF. Maksimal 5MB.</div>
                @if($nasabah->file_ktp)
                    <div class="mt-2" style="font-size:12px;">
                        <span class="text-success"><i class="bi bi-check-circle-fill me-1"></i>File KTP saat ini sudah tersedia.</span> Mengunggah file baru akan menggantikan file lama.
                    </div>
                @endif
            </div>
        </div>
        <div class="modal-footer bg-white border-top-0">
          <button type="button" class="btn btn-secondary shadow-sm" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary fw-bold shadow-sm"><i class="bi bi-save me-1"></i> Simpan Dokumen</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endif

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function cetakKuitansiTabungan(idKuitansi, tglMasehi, tglHijri, jenisTransaksi, nominal, terbilang, aksiMutasi) {
        let logoMadrasah = "{!! $logoUrl !!}";
        let namaMadrasah = "{!! addslashes($namaMadrasah) !!}";
        let alamatMadrasah = "{!! addslashes($alamatMadrasah) !!}";
        let kontakMadrasah = "{!! addslashes($kontakMadrasah) !!}";
        
        let namaSiswa = "{!! addslashes($nasabah->nama_lengkap) !!}";
        let noRekening = "{{ $nasabah->no_rekening }}";
        let infoNasabah = "{!! addslashes($infoNasabah) !!}";
        let namaAdmin = "{{ Auth::user()->name ?? 'Bendahara Madrasah' }}";
        
        let judulKuitansi = aksiMutasi === 'Setor' ? 'BUKTI SETORAN TABUNGAN' : 'BUKTI PENARIKAN TABUNGAN';
        let labelPenyerah = aksiMutasi === 'Setor' ? 'Telah terima dari' : 'Telah diserahkan kepada';
        
        let printWindow = window.open('', '_blank', 'width=800,height=600');
        let imgTag = logoMadrasah ? `<img src="${logoMadrasah}" class="kop-logo">` : '';

        let htmlContent = `
            <html>
            <head>
                <title>Kuitansi Tabungan - ${idKuitansi}</title>
                <style>
                    @page { size: 24.13cm 13.97cm; margin: 0.5cm; }
                    body { font-family: 'Courier New', Courier, monospace, Arial, sans-serif; font-size: 13px; margin: 0; padding: 0; color: #000; }
                    .print-container { width: 100%; max-width: 100%; border: 2px dashed #ccc; padding: 15px; box-sizing: border-box; position: relative; height: 12.97cm; }
                    .kop-surat { display: flex; align-items: center; border-bottom: 3px double #000; padding-bottom: 10px; margin-bottom: 15px; }
                    .kop-logo { width: 70px; height: 70px; object-fit: contain; margin-right: 15px; }
                    .kop-text { flex: 1; text-align: center; }
                    .kop-text h2 { margin: 0; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-family: Arial, sans-serif;}
                    .kop-text p { margin: 2px 0; font-size: 10px; font-family: Arial, sans-serif; }
                    .kuitansi-title { text-align: center; font-size: 16px; font-weight: bold; text-decoration: underline; margin-bottom: 15px; letter-spacing: 2px;}
                    .info-top { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 12px; font-weight: bold; }
                    .row-data { display: flex; margin-bottom: 8px; line-height: 1.5; }
                    .col-label { width: 25%; font-weight: bold; }
                    .col-separator { width: 2%; text-align: center; font-weight: bold; }
                    .col-value { width: 73%; border-bottom: 1px dotted #888; }
                    .terbilang-box { background-color: #f9f9f9; padding: 6px 10px; font-style: italic; border: 1px solid #000; font-weight: bold; border-radius: 4px; margin-top: 5px; margin-bottom: 5px;}
                    .footer-area { display: flex; justify-content: space-between; margin-top: 20px; align-items: flex-end; }
                    .nominal-besar { font-size: 22px; font-weight: bold; border: 2px solid #000; padding: 8px 15px; display: inline-block; background: #eee; border-radius: 5px;}
                    .ttd-box { text-align: center; width: 30%; font-size: 12px;}
                    .ttd-space { height: 50px; }
                    .ttd-name { font-weight: bold; text-decoration: underline; }
                </style>
            </head>
            <body onload="window.print(); window.onafterprint = function(){ window.close(); }">
                <div class="print-container">
                    <div class="kop-surat">
                        ${imgTag}
                        <div class="kop-text">
                            <h2>${namaMadrasah}</h2>
                            <p>${alamatMadrasah}</p>
                            <p>${kontakMadrasah}</p>
                        </div>
                    </div>
                    
                    <div class="kuitansi-title">${judulKuitansi}</div>
                    
                    <div class="info-top">
                        <div>No. Referensi : ${idKuitansi}</div>
                        <div style="text-align: right;">Tanggal : ${tglHijri} <br><span style="font-size:10px; font-weight:normal;">(${tglMasehi} M)</span></div>
                    </div>

                    <div class="row-data">
                        <div class="col-label">${labelPenyerah}</div>
                        <div class="col-separator">:</div>
                        <div class="col-value"><strong>${namaSiswa}</strong></div>
                    </div>
                    <div class="row-data">
                        <div class="col-label">Nomor Rekening</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${noRekening}</div>
                    </div>
                    <div class="row-data">
                        <div class="col-label">Status Nasabah</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${infoNasabah}</div>
                    </div>
                    
                    <div class="row-data" style="align-items: center; margin-top: 10px;">
                        <div class="col-label">Uang sejumlah</div>
                        <div class="col-separator">:</div>
                        <div class="col-value terbilang-box" style="border-bottom: none; margin-top:0;">## ${terbilang} Rupiah ##</div>
                    </div>

                    <div class="row-data" style="margin-top: 10px;">
                        <div class="col-label">Guna Membayar</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${jenisTransaksi}</div>
                    </div>

                    <div class="footer-area">
                        <div>
                            <div class="nominal-besar">Rp ${Number(nominal).toLocaleString('id-ID')}</div>
                        </div>
                        <div class="ttd-box">
                            <div>Penerima / Bendahara</div>
                            <div class="ttd-space"></div>
                            <div class="ttd-name">${namaAdmin}</div>
                        </div>
                    </div>
                </div>
            </body>
            </html>
        `;
        
        printWindow.document.write(htmlContent);
        printWindow.document.close();
    }

    function confirmDeleteMutasi(id) {
        Swal.fire({
            title: 'Hapus Transaksi?',
            text: "Data transaksi yang dihapus tidak bisa dikembalikan. Saldo nasabah akan dikalkulasi ulang secara otomatis.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2500 });
        @endif
        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Terjadi Kesalahan!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/tabungan/pegawai/staff.blade.php`
```php
{{-- resources/views/admin/keuangan/tabungan/pegawai/staff.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Tabungan Staff & Tenaga Kependidikan')

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold text-success"><i class="bi bi-piggy-bank me-2"></i>Tabungan Staff (Tendik)</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola buku rekening tabungan syariah dan jariyah khusus staff madrasah.</p>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h6 class="card-title mb-0 fw-bold"><i class="bi bi-person-square text-primary me-2"></i>Buku Rekening Staff</h6>
            
            <div class="d-flex align-items-center gap-3">
                <div class="input-group input-group-sm" style="width: 260px;">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama / NIP Staff..." 
                           onkeyup="searchTableStaff(this)" aria-label="Cari Staff">
                </div>
                <span class="badge bg-success rounded-pill px-3 py-2">{{ $staffs->count() }} Staff</span>
            </div>
        </div>
        
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; width: 30%">PROFIL STAFF</th>
                            <th class="text-secondary" style="font-size: 12px; width: 20%">NO. REKENING</th>
                            <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO SYARIAH</th>
                            <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO JARIYAH</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 15%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-staff">
                        @forelse($staffs as $index => $staff)
                        <tr class="row-staff">
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="{{ $staff->foto ? asset('storage/staff/' . $staff->foto) : 'https://ui-avatars.com/api/?name='.urlencode($staff->nama_lengkap).'&background=random&size=100' }}" 
                                         class="rounded-circle object-fit-cover shadow-sm me-3 border" 
                                         style="width: 50px; height: 50px; aspect-ratio: 1/1;" 
                                         alt="Foto {{ $staff->nama_lengkap }}">
                                    
                                    <div class="data-pencarian">
                                        <span class="fw-bold text-dark d-block mb-1" style="font-size: 14px;">{{ $staff->nama_lengkap }}</span>
                                        <div class="text-muted mb-1" style="font-size: 11px; line-height: 1.4;">
                                            <span class="d-block"><i class="bi bi-upc-scan me-1"></i> NIP: <strong class="text-dark">{{ $staff->nip ?? '-' }}</strong></span>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            @if($staff->tabungan)
                                <td>
                                    <span class="d-block fw-bold font-monospace text-primary" style="font-size: 14px; letter-spacing: 1px;">{{ $staff->tabungan->no_rekening }}</span>
                                    <span class="badge bg-success bg-opacity-10 text-success border border-success" style="font-size: 10px;">Aktif</span>
                                </td>
                                <td class="text-end fw-bold text-info" style="font-size: 13px;">Rp {{ number_format($staff->tabungan->saldo_syariah, 0, ',', '.') }}</td>
                                <td class="text-end fw-bold text-success" style="font-size: 13px;">Rp {{ number_format($staff->tabungan->saldo_jariyah, 0, ',', '.') }}</td>
                                <td class="text-center">
                                    <a href="{{ route('admin.tabungan.show', $staff->tabungan->id) }}" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1 shadow-sm" style="font-size: 12px; padding: 6px 10px;">
                                        <i class="bi bi-journal-text"></i> Buku Tabungan
                                    </a>
                                </td>
                            @else
                                <td>
                                    <span class="badge bg-secondary mb-1" style="font-size: 11px;">Belum Memiliki Rekening</span>
                                    <span class="badge bg-light text-muted border d-block" style="font-size: 10px; width: max-content;">Non-Aktif</span>
                                </td>
                                <td class="text-end text-muted fw-bold" style="font-size: 13px;">Rp 0</td>
                                <td class="text-end text-muted fw-bold" style="font-size: 13px;">Rp 0</td>
                                <td class="text-center">
                                    <form action="{{ route('admin.tabungan.buka_rekening_staff') }}" method="POST" id="form-buka-{{ $staff->id }}" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="staff_id" value="{{ $staff->id }}">
                                        <button type="button" class="btn btn-sm btn-success d-inline-flex align-items-center gap-1 shadow-sm" style="font-size: 12px; padding: 6px 10px;" onclick="confirmBukaRekening({{ $staff->id }}, '{{ addslashes($staff->nama_lengkap) }}')">
                                            <i class="bi bi-person-add"></i> Buka Rekening
                                        </button>
                                    </form>
                                </td>
                            @endif

                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-person-x fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada data staff yang terdaftar.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function searchTableStaff(inputElement) {
        let filter = inputElement.value.toLowerCase();
        let tbody = document.getElementById('tbody-staff');
        if (!tbody) return;
        
        let rows = tbody.getElementsByClassName('row-staff');
        let visibleCount = 0;
        
        for (let i = 0; i < rows.length; i++) {
            let textValue = rows[i].textContent || rows[i].innerText;
            if (textValue.toLowerCase().indexOf(filter) > -1) {
                rows[i].style.display = "";
                visibleCount++;
            } else {
                rows[i].style.display = "none";
            }
        }
        
        let emptyStateRow = tbody.querySelector('.search-empty-state');
        if (visibleCount === 0 && filter !== "") {
            if (!emptyStateRow) {
                let emptyHtml = `
                    <tr class="search-empty-state">
                        <td colspan="6" class="text-center py-4 text-danger fst-italic bg-light">
                            <i class="bi bi-search me-2"></i>Staff dengan kata kunci "<strong>${filter}</strong>" tidak ditemukan.
                        </td>
                    </tr>`;
                tbody.insertAdjacentHTML('beforeend', emptyHtml);
            } else {
                emptyStateRow.querySelector('td').innerHTML = `<i class="bi bi-search me-2"></i>Staff dengan kata kunci "<strong>${filter}</strong>" tidak ditemukan.`;
                emptyStateRow.style.display = "";
            }
        } else if (emptyStateRow) {
            emptyStateRow.style.display = "none";
        }
    }

    function confirmBukaRekening(id, nama) {
        Swal.fire({
            title: 'Buka Rekening Staff?',
            text: "Sistem akan membuat nomor rekening otomatis untuk " + nama,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#198754',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Buat Rekening!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-buka-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2000 });
        @endif
        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Terjadi Kesalahan!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/tabungan/pegawai/guru.blade.php`
```php
{{-- resources/views/admin/keuangan/tabungan/pegawai/guru.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Tabungan Guru & Tenaga Pendidik')

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold text-success"><i class="bi bi-piggy-bank me-2"></i>Tabungan Pendidik (Guru)</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola buku rekening tabungan syariah dan jariyah khusus guru.</p>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h6 class="card-title mb-0 fw-bold"><i class="bi bi-person-workspace text-primary me-2"></i>Buku Rekening Guru</h6>
            
            <div class="d-flex align-items-center gap-3">
                <div class="input-group input-group-sm" style="width: 260px;">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama / NIP Guru..." 
                           onkeyup="searchTableGuru(this)" aria-label="Cari Guru">
                </div>
                <span class="badge bg-success rounded-pill px-3 py-2">{{ $gurus->count() }} Guru</span>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; width: 30%">PROFIL PENDIDIK</th>
                            <th class="text-secondary" style="font-size: 12px; width: 20%">NO. REKENING</th>
                            <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO SYARIAH</th>
                            <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO JARIYAH</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 15%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-guru">
                        @forelse($gurus as $index => $guru)
                        <tr class="row-guru">
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="{{ $guru->foto ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=100' }}" 
                                         class="rounded-circle object-fit-cover shadow-sm me-3 border" 
                                         style="width: 50px; height: 50px; aspect-ratio: 1/1;" 
                                         alt="Foto {{ $guru->nama_lengkap }}">
                                    
                                    <div class="data-pencarian">
                                        <span class="fw-bold text-dark d-block mb-1" style="font-size: 14px;">{{ $guru->nama_lengkap }}</span>
                                        <div class="text-muted mb-1" style="font-size: 11px; line-height: 1.4;">
                                            <span class="d-block"><i class="bi bi-upc-scan me-1"></i> NIP: <strong class="text-dark">{{ $guru->nip ?? '-' }}</strong></span>
                                        </div>
                                        <div class="d-flex flex-wrap gap-1 mt-1">
                                            @forelse($guru->jabatans as $jabatan)
                                                <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary" style="font-size: 9px;">{{ $jabatan->nama_jabatan }}</span>
                                            @empty
                                                <span class="badge bg-light text-muted border border-secondary" style="font-size: 9px;">Guru Mapel Umum</span>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <!-- LOGIKA TABUNGAN -->
                            @if($guru->tabungan)
                                <td>
                                    <span class="d-block fw-bold font-monospace text-primary" style="font-size: 14px; letter-spacing: 1px;">{{ $guru->tabungan->no_rekening }}</span>
                                    <span class="badge bg-success bg-opacity-10 text-success border border-success" style="font-size: 10px;">Aktif</span>
                                </td>
                                <td class="text-end fw-bold text-info" style="font-size: 13px;">Rp {{ number_format($guru->tabungan->saldo_syariah, 0, ',', '.') }}</td>
                                <td class="text-end fw-bold text-success" style="font-size: 13px;">Rp {{ number_format($guru->tabungan->saldo_jariyah, 0, ',', '.') }}</td>
                                <td class="text-center">
                                    <a href="{{ route('admin.tabungan.show', $guru->tabungan->id) }}" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1 shadow-sm" style="font-size: 12px; padding: 6px 10px;">
                                        <i class="bi bi-journal-text"></i> Buku Tabungan
                                    </a>
                                </td>
                            @else
                                <td>
                                    <span class="badge bg-secondary mb-1" style="font-size: 11px;">Belum Memiliki Rekening</span>
                                    <span class="badge bg-light text-muted border d-block" style="font-size: 10px; width: max-content;">Non-Aktif</span>
                                </td>
                                <td class="text-end text-muted fw-bold" style="font-size: 13px;">Rp 0</td>
                                <td class="text-end text-muted fw-bold" style="font-size: 13px;">Rp 0</td>
                                <td class="text-center">
                                    <form action="{{ route('admin.tabungan.buka_rekening_guru') }}" method="POST" id="form-buka-{{ $guru->id }}" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="guru_id" value="{{ $guru->id }}">
                                        <button type="button" class="btn btn-sm btn-success d-inline-flex align-items-center gap-1 shadow-sm" style="font-size: 12px; padding: 6px 10px;" onclick="confirmBukaRekening({{ $guru->id }}, '{{ addslashes($guru->nama_lengkap) }}')">
                                            <i class="bi bi-person-add"></i> Buka Rekening
                                        </button>
                                    </form>
                                </td>
                            @endif

                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-person-x fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada data guru yang terdaftar.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function searchTableGuru(inputElement) {
        let filter = inputElement.value.toLowerCase();
        let tbody = document.getElementById('tbody-guru');
        if (!tbody) return;
        
        let rows = tbody.getElementsByClassName('row-guru');
        let visibleCount = 0;
        
        for (let i = 0; i < rows.length; i++) {
            let textValue = rows[i].textContent || rows[i].innerText;
            if (textValue.toLowerCase().indexOf(filter) > -1) {
                rows[i].style.display = "";
                visibleCount++;
            } else {
                rows[i].style.display = "none";
            }
        }
        
        let emptyStateRow = tbody.querySelector('.search-empty-state');
        if (visibleCount === 0 && filter !== "") {
            if (!emptyStateRow) {
                let emptyHtml = `
                    <tr class="search-empty-state">
                        <td colspan="6" class="text-center py-4 text-danger fst-italic bg-light">
                            <i class="bi bi-search me-2"></i>Pendidik dengan kata kunci "<strong>${filter}</strong>" tidak ditemukan.
                        </td>
                    </tr>`;
                tbody.insertAdjacentHTML('beforeend', emptyHtml);
            } else {
                emptyStateRow.querySelector('td').innerHTML = `<i class="bi bi-search me-2"></i>Pendidik dengan kata kunci "<strong>${filter}</strong>" tidak ditemukan.`;
                emptyStateRow.style.display = "";
            }
        } else if (emptyStateRow) {
            emptyStateRow.style.display = "none";
        }
    }

    function confirmBukaRekening(id, nama) {
        Swal.fire({
            title: 'Buka Rekening Guru?',
            text: "Sistem akan membuat nomor rekening otomatis untuk " + nama,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#198754',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Buat Rekening!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-buka-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2000 });
        @endif
        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Terjadi Kesalahan!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/tabungan/cetak_buku.blade.php`
```php
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Cetak Buku Tabungan - {{ $nasabah->nama_lengkap }}</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #000; margin: 0; padding: 0; }
        
        /* PENGATURAN KERTAS A4 LANDSCAPE */
        @page { size: A4 landscape; margin: 15mm; }
        @media print {
            body { padding: 0; }
        }

        .page-book { width: 100%; margin: 0 auto; padding: 0; }
        
        /* KOP SURAT */
        .kop-surat { display: flex; align-items: center; border-bottom: 2px dashed #000; padding-bottom: 10px; margin-bottom: 15px; }
        .kop-logo { width: 70px; height: 70px; object-fit: contain; margin-right: 15px; }
        .kop-text { flex: 1; text-align: center; }
        .kop-text h2 { margin: 0; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-family: Arial, sans-serif;}
        .kop-text p { margin: 2px 0; font-size: 11px; font-family: Arial, sans-serif; }

        /* JUDUL DOKUMEN */
        .document-title { text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 5px; }
        .document-subtitle { text-align: center; font-size: 12px; margin-bottom: 20px; border-bottom: 1px dashed #000; padding-bottom: 10px; }

        .info-nasabah { width: 100%; margin-bottom: 15px; }
        .info-nasabah td { padding: 4px 5px; }
        
        /* TABEL DATA A4 LANDSCAPE FIT */
        .buku-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
        .buku-table th, .buku-table td { border: 1px solid #000; padding: 8px 6px; text-align: right; word-wrap: break-word; font-size: 12px;}
        .buku-table th { text-align: center; background-color: #eee; font-weight: bold; font-size: 13px;}
        
        .buku-table td.text-left { text-align: left; }
        .buku-table td.text-center { text-align: center; }
    </style>
</head>
<body onload="window.print()">
    
    @php
        $profilSekolah = \App\Models\ProfilSekolah::first();
        $logoUrl = $profilSekolah && $profilSekolah->logo_path ? asset('storage/'.$profilSekolah->logo_path) : '';
        $namaMadrasah = $profilSekolah->nama_madrasah ?? 'Madrasah Al Idrus';
        $alamatMadrasah = $profilSekolah->alamat ?? '';
        $kontakMadrasah = "Telp/WA: " . ($profilSekolah->telepon ?? '-') . " | Email: " . ($profilSekolah->email ?? '-');
    @endphp

    <div class="page-book">
        
        <div class="kop-surat">
            @if($logoUrl)
                <img src="{{ $logoUrl }}" class="kop-logo" alt="Logo">
            @endif
            <div class="kop-text">
                <h2>{{ $namaMadrasah }}</h2>
                <p>{{ $alamatMadrasah }}</p>
                <p>{{ $kontakMadrasah }}</p>
            </div>
        </div>

        <div class="document-title">BUKU TABUNGAN MADRASAH AL IDRUS</div>
        <div class="document-subtitle">Laporan Seluruh Histori Transaksi</div>

        <table class="info-nasabah">
            <tr>
                <td width="15%">No. Rekening</td><td width="35%">: <strong>{{ $nasabah->no_rekening }}</strong></td>
                <td width="15%">Kategori</td><td width="35%">: {{ $nasabah->entitas_profil }}</td>
            </tr>
            <tr>
                <td>Nama Nasabah</td><td>: <strong>{{ strtoupper($nasabah->nama_lengkap) }}</strong></td>
                <td>Pencetakan</td><td>: {{ now()->format('d/m/Y H:i:s') }}</td>
            </tr>
        </table>

        <table class="buku-table">
            <thead>
                <tr>
                    <th width="5%">NO</th>
                    <th width="12%">TANGGAL</th>
                    <th width="9%">SANDI</th>
                    <th width="17%">DEBIT</th>
                    <th width="17%">KREDIT</th>
                    <th width="20%">SALDO SYARIAH</th>
                    <th width="20%">SALDO JARIYAH</th>
                </tr>
            </thead>
            <tbody>
                @php 
                    $saldoSyariah = 0; 
                    $saldoJariyah = 0; 
                @endphp
                @forelse($mutasi as $index => $m)
                    @php
                        if($m->jenis_tabungan == 'Syariah') {
                            $m->jenis_mutasi == 'Setor' ? $saldoSyariah += $m->nominal : $saldoSyariah -= $m->nominal;
                            $sandi = $m->jenis_mutasi == 'Setor' ? 'SS' : 'TS';
                        } else {
                            $m->jenis_mutasi == 'Setor' ? $saldoJariyah += $m->nominal : $saldoJariyah -= $m->nominal;
                            $sandi = $m->jenis_mutasi == 'Setor' ? 'SJ' : 'TJ';
                        }
                    @endphp
                    <tr>
                        <td class="text-center">{{ $index + 1 }}</td>
                        <td class="text-center">{{ \Carbon\Carbon::parse($m->tanggal_transaksi)->format('d/m/y') }}</td>
                        <td class="text-center">{{ $sandi }}</td>
                        <td>{{ $m->jenis_mutasi == 'Tarik' ? number_format($m->nominal, 0, ',', '.') : '' }}</td>
                        <td>{{ $m->jenis_mutasi == 'Setor' ? number_format($m->nominal, 0, ',', '.') : '' }}</td>
                        <td>{{ number_format($saldoSyariah, 0, ',', '.') }}</td>
                        <td>{{ number_format($saldoJariyah, 0, ',', '.') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center">Buku Tabungan Kosong. Belum ada transaksi.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        
        <div style="margin-top: 20px; font-size: 11px;">
            <strong>Keterangan Sandi:</strong><br>
            SS: Setoran Syariah | TS: Tarikan Syariah | SJ: Setoran Jariyah | TJ: Tarikan Jariyah
        </div>
    </div>
</body>
</html>
```

## File: `resources/views/admin/keuangan/tabungan/siswa/table_render.blade.php`
```php
{{-- resources/views/admin/keuangan/tabungan/siswa/table_render.blade.php --}}
@php
    $tableId = uniqid('tbody_tab_siswa_');
@endphp

<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
        <h6 class="mb-0 fw-bold text-success"><i class="bi bi-list-columns-reverse me-2"></i>Buku Rekening Kelas - {{ $namaKelas }}</h6>
        
        <div class="d-flex align-items-center flex-wrap gap-3">
            <div class="input-group input-group-sm" style="width: 280px;">
                <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama / NIS Siswa..." 
                       onkeyup="searchTableSiswa(this, '{{ $tableId }}')" aria-label="Cari Siswa">
            </div>
            <span class="badge bg-success rounded-pill py-2 px-3">{{ $dataSiswa->count() }} Siswa</span>
        </div>
    </div>
    
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                        <th class="text-secondary" style="font-size: 12px; width: 30%">PROFIL SISWA</th>
                        <th class="text-secondary" style="font-size: 12px; width: 20%">NO. REKENING</th>
                        <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO SYARIAH</th>
                        <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO JARIYAH</th>
                        <th class="text-center text-secondary" style="font-size: 12px; width: 15%">AKSI</th>
                    </tr>
                </thead>
                <tbody id="{{ $tableId }}">
                    @forelse($dataSiswa as $siswa)
                        <tr class="row-siswa">
                            <td class="text-center text-muted">{{ $loop->iteration }}</td>
                            
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="{{ $siswa->foto ? asset('storage/siswa/' . $siswa->foto) : 'https://ui-avatars.com/api/?name='.urlencode($siswa->nama_lengkap).'&background=random&size=100' }}" 
                                         class="rounded-circle object-fit-cover shadow-sm me-3 border" style="width: 50px; height: 50px; aspect-ratio: 1/1;">
                                    
                                    <div class="data-pencarian">
                                        <span class="fw-bold text-dark d-block mb-1" style="font-size: 14px;">{{ $siswa->nama_lengkap }}</span>
                                        <span class="text-muted" style="font-size: 11px;"><i class="bi bi-upc-scan me-1"></i> NIS: <strong>{{ $siswa->nis ?? '-' }}</strong></span>
                                    </div>
                                </div>
                            </td>
                            
                            @if($siswa->tabungan)
                                <td>
                                    <span class="d-block fw-bold font-monospace text-primary" style="font-size: 14px; letter-spacing: 1px;">{{ $siswa->tabungan->no_rekening }}</span>
                                    <span class="badge bg-success bg-opacity-10 text-success border border-success" style="font-size: 10px;">Aktif</span>
                                </td>
                                <td class="text-end fw-bold text-info" style="font-size: 13px;">Rp {{ number_format($siswa->tabungan->saldo_syariah, 0, ',', '.') }}</td>
                                <td class="text-end fw-bold text-success" style="font-size: 13px;">Rp {{ number_format($siswa->tabungan->saldo_jariyah, 0, ',', '.') }}</td>
                                <td class="text-center">
                                    <a href="{{ route('admin.tabungan.show', $siswa->tabungan->id) }}" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1 shadow-sm" style="font-size: 12px; padding: 6px 10px;">
                                        <i class="bi bi-journal-text"></i> Buku Tabungan
                                    </a>
                                </td>
                            @else
                                <td>
                                    <span class="badge bg-secondary mb-1" style="font-size: 11px;">Belum Memiliki Rekening</span>
                                    <span class="badge bg-light text-muted border d-block" style="font-size: 10px; width: max-content;">Non-Aktif</span>
                                </td>
                                <td class="text-end text-muted fw-bold" style="font-size: 13px;">Rp 0</td>
                                <td class="text-end text-muted fw-bold" style="font-size: 13px;">Rp 0</td>
                                <td class="text-center">
                                    <form action="{{ route('admin.tabungan.buka_rekening_siswa') }}" method="POST" id="form-buka-{{ $siswa->id }}" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="siswa_id" value="{{ $siswa->id }}">
                                        <button type="button" class="btn btn-sm btn-success d-inline-flex align-items-center gap-1 shadow-sm" style="font-size: 12px; padding: 6px 10px;" onclick="confirmBukaRekening({{ $siswa->id }}, '{{ addslashes($siswa->nama_lengkap) }}')">
                                            <i class="bi bi-person-add"></i> Buka Rekening
                                        </button>
                                    </form>
                                </td>
                            @endif

                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-people fs-1 d-block mb-2 text-black-50"></i>
                                Tidak ditemukan data siswa aktif untuk kelas <strong>{{ $namaKelas }}</strong>.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@once
<script>
    function searchTableSiswa(inputElement, tbodyId) {
        let filter = inputElement.value.toLowerCase();
        let tbody = document.getElementById(tbodyId);
        if (!tbody) return;
        
        let rows = tbody.getElementsByClassName('row-siswa');
        let visibleCount = 0;
        
        for (let i = 0; i < rows.length; i++) {
            let textValue = rows[i].textContent || rows[i].innerText;
            if (textValue.toLowerCase().indexOf(filter) > -1) {
                rows[i].style.display = "";
                visibleCount++;
            } else {
                rows[i].style.display = "none";
            }
        }
        
        let emptyStateRow = tbody.querySelector('.search-empty-state');
        if (visibleCount === 0 && filter !== "") {
            if (!emptyStateRow) {
                let emptyHtml = `
                    <tr class="search-empty-state">
                        <td colspan="6" class="text-center py-4 text-danger fst-italic bg-light">
                            <i class="bi bi-search me-2"></i>Siswa dengan kata kunci "<strong>${filter}</strong>" tidak ditemukan.
                        </td>
                    </tr>`;
                tbody.insertAdjacentHTML('beforeend', emptyHtml);
            } else {
                emptyStateRow.querySelector('td').innerHTML = `<i class="bi bi-search me-2"></i>Siswa dengan kata kunci "<strong>${filter}</strong>" tidak ditemukan.`;
                emptyStateRow.style.display = "";
            }
        } else if (emptyStateRow) {
            emptyStateRow.style.display = "none";
        }
    }
</script>
@endonce
```

## File: `resources/views/admin/keuangan/tabungan/siswa/index.blade.php`
```php
{{-- resources/views/admin/keuangan/tabungan/siswa/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Tabungan Siswa - ' . $jenjang->nama_jenjang)

@push('styles')
<style>
    .kelas-nav .nav-link { color: #495057; font-weight: 500; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.2s ease-in-out; border: 1px solid transparent; }
    .kelas-nav .nav-link:hover { background-color: #f8f9fa; border-color: #e9ecef; }
    .kelas-nav .nav-link.active { background-color: #198754; color: #fff; border-color: #198754; box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2); }
    .kelas-nav .nav-link .badge { background-color: #e9ecef !important; color: #495057 !important; }
    .kelas-nav .nav-link.active .badge { background-color: #fff !important; color: #198754 !important; }
    .sub-kelas-nav { background-color: #ffffff; border: 1px solid #dee2e6; border-radius: 6px; padding: 0.5rem; }
    .sub-kelas-nav .nav-link { font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: 4px; color: #6c757d; }
    .sub-kelas-nav .nav-link.active { background-color: #e9ecef; color: #212529; font-weight: bold; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h4 class="mb-1 fw-bold text-success"><i class="bi bi-piggy-bank me-2"></i>Tabungan Siswa</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">
                Pengelolaan Saldo Syariah & Jariyah <span class="text-success fw-medium">{{ $jenjang->nama_jenjang }} - Tingkat {{ $tingkat->nama_tingkat }}</span>.
            </p>
        </div>
        
        <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 mb-0 bg-white p-2 rounded border shadow-sm">
            <label class="form-label mb-0 fw-medium text-nowrap text-muted" style="font-size: 13px;"><i class="bi bi-funnel me-1"></i>Tahun Ajaran:</label>
            <select name="tahun_ajaran_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()" style="min-width: 180px; font-size: 13px;">
                <option value="">-- Semua Tahun --</option>
                @foreach($tahunAjarans as $ta)
                    <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                        {{ $ta->tahun_ajaran }} {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}
                    </option>
                @endforeach
            </select>
        </form>
    </div>

    @if($daftarKelas->isEmpty())
        <div class="alert alert-info border-0 shadow-sm d-flex align-items-center bg-white py-4">
            <i class="bi bi-info-circle fs-3 me-3 text-info"></i>
            <div>
                <h6 class="mb-1 fw-bold">Belum Ada Kelas</h6>
                <p class="mb-0 small text-muted">Belum ada ruang kelas yang didaftarkan pada jenjang tingkat ini.</p>
            </div>
        </div>
    @else
        <div class="nav-wrapper position-relative mb-4">
            <ul class="nav nav-pills kelas-nav gap-2 bg-white p-2 rounded-3 shadow-sm border" id="kelasTab" role="tablist">
                @foreach($daftarKelas as $kelas)
                    <li class="nav-item flex-fill text-center" role="presentation">
                        <button class="nav-link w-100 mb-0 {{ $loop->first ? 'active' : '' }} d-flex justify-content-center align-items-center gap-2" data-bs-toggle="pill" data-bs-target="#kelas-{{ $kelas->id }}" type="button" role="tab">
                            <i class="bi bi-door-open"></i> {{ $kelas->nama_kelas }}
                            <span class="badge rounded-pill">{{ $siswasReal->where('kelas_id', $kelas->id)->count() }}</span>
                        </button>
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="tab-content" id="kelasTabContent">
            @foreach($daftarKelas as $kelas)
                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="kelas-{{ $kelas->id }}" role="tabpanel">
                    @if($kelas->details->isNotEmpty())
                        <ul class="nav nav-pills sub-kelas-nav mb-3 gap-1 shadow-sm" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#sub-all-{{ $kelas->id }}" type="button" role="tab"><i class="bi bi-collection"></i> Tampilkan Semua Slot</button>
                            </li>
                            @foreach($kelas->details as $detail)
                                @php
                                    $valDB = 'L';
                                    if($detail->gender) {
                                        $lower = strtolower($detail->gender->nama_gender);
                                        if (str_contains($lower, 'perempuan') || str_contains($lower, 'wanita') || str_contains($lower, 'putri') || str_contains($lower, 'banat') || $lower === 'p') { $valDB = 'P'; }
                                    }
                                @endphp
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#sub-{{ $detail->id }}" type="button" role="tab">
                                        Slot {{ $detail->gender->nama_gender ?? 'Campuran' }} ({{ $siswasReal->where('kelas_id', $kelas->id)->where('jenis_kelamin', $valDB)->count() }})
                                    </button>
                                </li>
                            @endforeach
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="sub-all-{{ $kelas->id }}" role="tabpanel">
                                @include('admin.keuangan.tabungan.siswa.table_render', ['dataSiswa' => $siswasReal->where('kelas_id', $kelas->id), 'namaKelas' => $kelas->nama_kelas])
                            </div>
                            @foreach($kelas->details as $detail)
                                @php
                                    $valDB = 'L';
                                    if($detail->gender) {
                                        $lower = strtolower($detail->gender->nama_gender);
                                        if (str_contains($lower, 'perempuan') || str_contains($lower, 'wanita') || str_contains($lower, 'putri') || str_contains($lower, 'banat') || $lower === 'p') { $valDB = 'P'; }
                                    }
                                @endphp
                                <div class="tab-pane fade" id="sub-{{ $detail->id }}" role="tabpanel">
                                    @include('admin.keuangan.tabungan.siswa.table_render', ['dataSiswa' => $siswasReal->where('kelas_id', $kelas->id)->where('jenis_kelamin', $valDB), 'namaKelas' => $kelas->nama_kelas . ' (Slot ' . ($detail->gender->nama_gender ?? '') . ')'])
                                </div>
                            @endforeach
                        </div>
                    @else
                        @include('admin.keuangan.tabungan.siswa.table_render', ['dataSiswa' => $siswasReal->where('kelas_id', $kelas->id), 'namaKelas' => $kelas->nama_kelas])
                    @endif
                </div>
            @endforeach
        </div>
    @endif
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmBukaRekening(id, nama) {
        Swal.fire({
            title: 'Buka Rekening Tabungan?',
            text: "Sistem akan membuat nomor rekening otomatis untuk " + nama,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#198754',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Buat Rekening!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-buka-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2500 });
        @endif
        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Gagal!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/tabungan/rekap/index.blade.php`
```php
{{-- resources/views/admin/keuangan/tabungan/rekap/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Rekap Keuangan Tabungan Global')

@push('styles')
<style>
    .table-hierarchy th { background-color: #f8f9fa; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #495057; }
    .row-kategori { background-color: #e9ecef; font-weight: bold; border-bottom: 2px solid #dee2e6; }
    .buku-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 20px;}
    
    @media print {
        body * { visibility: hidden; }
        #print-area, #print-area * { visibility: visible; }
        #print-area { position: absolute; left: 0; top: 0; width: 100%; }
        .card { border: none !important; box-shadow: none !important; }
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4" id="print-area">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h4 class="mb-1 fw-bold text-success"><i class="bi bi-piggy-bank me-2"></i>Rekap Tabungan Global</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">
                Pemantauan total arus kas (Setoran, Tarikan, dan Saldo Akhir) seluruh Nasabah Madrasah.
            </p>
        </div>
        
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-dark btn-sm shadow-sm d-flex align-items-center gap-2" onclick="window.print()">
                <i class="bi bi-printer"></i> Cetak Rekapitulasi
            </button>
        </div>
    </div>

    @php
        $grandTotalJml = 0;
        $grandSetorSya = 0;
        $grandTarikSya = 0;
        $grandSetorJar = 0;
        $grandTarikJar = 0;

        foreach($rekap as $kat => $data) {
            $grandTotalJml += $data['jml'];
            $grandSetorSya += $data['setor_sya'];
            $grandTarikSya += $data['tarik_sya'];
            $grandSetorJar += $data['setor_jar'];
            $grandTarikJar += $data['tarik_jar'];
        }

        $grandSaldoSya = $grandSetorSya - $grandTarikSya;
        $grandSaldoJar = $grandSetorJar - $grandTarikJar;
        $grandTotalSaldo = $grandSaldoSya + $grandSaldoJar;
    @endphp

    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-3 mb-4">
        <div class="col">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="buku-icon bg-primary bg-opacity-10 text-primary me-3"><i class="bi bi-people"></i></div>
                    <div>
                        <div class="text-muted fw-bold mb-1" style="font-size: 11px;">TOTAL NASABAH AKTIF</div>
                        <h4 class="mb-0 fw-bold text-dark">{{ number_format($grandTotalJml, 0, ',', '.') }} <span style="font-size: 12px; font-weight:normal;">Buku</span></h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card shadow-sm border-0 border-start border-info h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="buku-icon bg-info bg-opacity-10 text-info me-3"><i class="bi bi-wallet2"></i></div>
                    <div>
                        <div class="text-info fw-bold mb-1" style="font-size: 11px;">SALDO SYARIAH SAAT INI</div>
                        <h4 class="mb-0 fw-bold text-dark font-monospace">Rp {{ number_format($grandSaldoSya, 0, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card shadow-sm border-0 border-start border-success h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="buku-icon bg-success bg-opacity-10 text-success me-3"><i class="bi bi-heart-fill"></i></div>
                    <div>
                        <div class="text-success fw-bold mb-1" style="font-size: 11px;">SALDO JARIYAH SAAT INI</div>
                        <h4 class="mb-0 fw-bold text-dark font-monospace">Rp {{ number_format($grandSaldoJar, 0, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card shadow-sm border-0 border-start border-warning h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3 d-flex align-items-center">
                    <div class="buku-icon bg-warning bg-opacity-10 text-warning text-dark me-3"><i class="bi bi-bank"></i></div>
                    <div>
                        <div class="text-warning text-dark fw-bold mb-1" style="font-size: 11px;">TOTAL KAS TABUNGAN</div>
                        <h4 class="mb-0 fw-bold text-dark font-monospace">Rp {{ number_format($grandTotalSaldo, 0, ',', '.') }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0 border-top border-success" style="border-top-width: 4px !important;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 table-hierarchy">
                    <thead>
                        <tr>
                            <th rowspan="2" width="20%" class="ps-4 align-middle">KATEGORI NASABAH</th>
                            <th rowspan="2" width="10%" class="text-center align-middle">JML BUKU</th>
                            <th colspan="2" class="text-center border-start">TABUNGAN SYARIAH</th>
                            <th colspan="2" class="text-center border-start">TABUNGAN JARIYAH</th>
                            <th rowspan="2" width="16%" class="text-end pe-4 align-middle border-start bg-light">TOTAL SALDO AKHIR</th>
                        </tr>
                        <tr>
                            <th width="13%" class="text-end border-start">Total Setoran</th>
                            <th width="13%" class="text-end">Total Tarikan</th>
                            <th width="13%" class="text-end border-start">Total Setoran</th>
                            <th width="13%" class="text-end">Total Tarikan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($rekap as $kategori => $data)
                            @php
                                $saldoSya = $data['setor_sya'] - $data['tarik_sya'];
                                $saldoJar = $data['setor_jar'] - $data['tarik_jar'];
                                $totalSaldo = $saldoSya + $saldoJar;
                                
                                $icon = 'bi-globe';
                                if($kategori == 'Siswa / Santri') $icon = 'bi-people';
                                if($kategori == 'Guru & Staff') $icon = 'bi-person-workspace';
                            @endphp
                            <tr class="row-kategori">
                                <td class="ps-4 text-dark"><i class="bi {{ $icon }} me-2 text-success"></i> {{ $kategori }}</td>
                                <td class="text-center">{{ number_format($data['jml'], 0, ',', '.') }}</td>
                                
                                <td class="text-end text-success border-start">Rp {{ number_format($data['setor_sya'], 0, ',', '.') }}</td>
                                <td class="text-end text-danger">Rp {{ number_format($data['tarik_sya'], 0, ',', '.') }}</td>
                                
                                <td class="text-end text-success border-start">Rp {{ number_format($data['setor_jar'], 0, ',', '.') }}</td>
                                <td class="text-end text-danger">Rp {{ number_format($data['tarik_jar'], 0, ',', '.') }}</td>
                                
                                <td class="text-end pe-4 border-start bg-light font-monospace text-primary">Rp {{ number_format($totalSaldo, 0, ',', '.') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    
                    <tfoot class="table-dark">
                        <tr>
                            <th class="ps-4 fs-6">GRAND TOTAL</th>
                            <th class="text-center fs-6">{{ number_format($grandTotalJml, 0, ',', '.') }}</th>
                            <th class="text-end text-success border-start">Rp {{ number_format($grandSetorSya, 0, ',', '.') }}</th>
                            <th class="text-end text-danger">Rp {{ number_format($grandTarikSya, 0, ',', '.') }}</th>
                            <th class="text-end text-success border-start">Rp {{ number_format($grandSetorJar, 0, ',', '.') }}</th>
                            <th class="text-end text-danger">Rp {{ number_format($grandTarikJar, 0, ',', '.') }}</th>
                            <th class="text-end pe-4 border-start fs-6 text-warning">Rp {{ number_format($grandTotalSaldo, 0, ',', '.') }}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
```

## File: `resources/views/admin/keuangan/tabungan/umum/index.blade.php`
```php
{{-- resources/views/admin/keuangan/tabungan/umum/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Tabungan Nasabah Umum')

@section('content')
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold text-success"><i class="bi bi-globe me-2"></i>Tabungan Nasabah Umum</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola rekening tabungan masyarakat, donatur, atau pihak luar madrasah.</p>
        </div>
        <button class="btn btn-primary btn-sm shadow-sm fw-bold d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#modalTambahUmum">
            <i class="bi bi-person-plus"></i> Pendaftaran Rekening Baru
        </button>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h6 class="card-title mb-0 fw-bold"><i class="bi bi-people-fill text-primary me-2"></i>Daftar Rekening Umum</h6>
            
            <div class="d-flex align-items-center gap-3">
                <div class="input-group input-group-sm" style="width: 260px;">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama / NIK..." 
                           onkeyup="searchTableUmum(this)" aria-label="Cari Nasabah">
                </div>
                <span class="badge bg-success rounded-pill px-3 py-2">{{ $umums->count() }} Nasabah</span>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                            <th class="text-secondary" style="font-size: 12px; width: 30%">PROFIL NASABAH</th>
                            <th class="text-secondary" style="font-size: 12px; width: 20%">NO. REKENING</th>
                            <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO SYARIAH</th>
                            <th class="text-secondary text-end" style="font-size: 12px; width: 15%">SALDO JARIYAH</th>
                            <th class="text-center text-secondary" style="font-size: 12px; width: 15%">AKSI</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-umum">
                        @forelse($umums as $index => $umum)
                        <tr class="row-umum">
                            <td class="text-center text-muted">{{ $index + 1 }}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($umum->nama_lengkap) }}&background=random&size=100" 
                                         class="rounded-circle object-fit-cover shadow-sm me-3 border" 
                                         style="width: 50px; height: 50px; aspect-ratio: 1/1;" alt="Foto">
                                    <div class="data-pencarian">
                                        <span class="fw-bold text-dark d-block mb-1" style="font-size: 14px;">{{ $umum->nama_lengkap }}</span>
                                        <div class="text-muted" style="font-size: 11px; line-height: 1.4;">
                                            <span class="d-block"><i class="bi bi-person-vcard me-1"></i> NIK: <strong>{{ $umum->nik ?? '-' }}</strong></span>
                                            <span class="d-block"><i class="bi bi-telephone me-1"></i> HP: <strong>{{ $umum->no_hp ?? '-' }}</strong></span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="d-block fw-bold font-monospace text-primary" style="font-size: 14px; letter-spacing: 1px;">{{ $umum->no_rekening }}</span>
                                <span class="badge bg-success bg-opacity-10 text-success border border-success" style="font-size: 10px;">{{ $umum->status_rekening }}</span>
                            </td>
                            <td class="text-end fw-bold text-info" style="font-size: 13px;">Rp {{ number_format($umum->saldo_syariah, 0, ',', '.') }}</td>
                            <td class="text-end fw-bold text-success" style="font-size: 13px;">Rp {{ number_format($umum->saldo_jariyah, 0, ',', '.') }}</td>
                            <td class="text-center">
                                <div class="d-flex justify-content-center gap-1">
                                    <a href="{{ route('admin.tabungan.show', $umum->id) }}" class="btn btn-sm btn-primary" title="Buku Tabungan">
                                        <i class="bi bi-journal-text"></i>
                                    </a>
                                    <button class="btn btn-sm btn-warning text-dark" data-bs-toggle="modal" data-bs-target="#modalEditUmum{{ $umum->id }}" title="Edit Data">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                    <form action="{{ route('admin.tabungan.umum.destroy', $umum->id) }}" method="POST" class="d-inline" id="form-delete-{{ $umum->id }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-danger" title="Hapus" onclick="confirmDeleteUmum({{ $umum->id }}, '{{ addslashes($umum->nama_lengkap) }}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        <div class="modal fade" id="modalEditUmum{{ $umum->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog">
                                <form action="{{ route('admin.tabungan.umum.update', $umum->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-content border-0 shadow">
                                        <div class="modal-header bg-warning text-dark border-0">
                                            <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square me-2"></i>Edit Data Dasar Nasabah</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body p-4 bg-light text-start">
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Nama Lengkap Sesuai KTP <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-warning" name="nama_lengkap" value="{{ $umum->nama_lengkap }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">NIK / No. Identitas <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-warning" name="nik" value="{{ $umum->nik }}" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Nomor HP / WhatsApp <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-warning" name="no_hp" value="{{ $umum->no_hp }}" required>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-white border-0">
                                            <button type="button" class="btn btn-secondary shadow-sm" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-warning fw-bold shadow-sm">Simpan Perubahan</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-person-x fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada nasabah umum yang terdaftar.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTambahUmum" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('admin.tabungan.umum.store') }}" method="POST">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white border-0">
                    <h5 class="modal-title fw-bold"><i class="bi bi-person-plus me-2"></i>Pendaftaran Nasabah Umum</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 bg-light text-start">
                    <div class="alert alert-info border-0 shadow-sm mb-4" style="font-size: 13px;">
                        <i class="bi bi-info-circle me-1"></i> Data kelengkapan dokumen seperti <strong>Alamat</strong> dan <strong>File KTP</strong> dapat diunggah menyusul di dalam halaman profil/buku tabungan nasabah.
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Nama Lengkap Sesuai KTP <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-primary" name="nama_lengkap" placeholder="Contoh: Budi Santoso" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">NIK / No. Identitas <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-primary" name="nik" placeholder="16 Digit NIK" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Nomor HP / WhatsApp <span class="text-danger">*</span></label>
                        <input type="text" class="form-control border-primary" name="no_hp" placeholder="08xxxxxxxxxx" required>
                    </div>
                </div>
                <div class="modal-footer bg-white border-0">
                    <button type="button" class="btn btn-secondary shadow-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary fw-bold shadow-sm">Buat Rekening Sekarang</button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function searchTableUmum(input) {
        let filter = input.value.toLowerCase();
        let rows = document.getElementsByClassName('row-umum');
        for (let i = 0; i < rows.length; i++) {
            let text = rows[i].textContent || rows[i].innerText;
            rows[i].style.display = text.toLowerCase().indexOf(filter) > -1 ? "" : "none";
        }
    }

    function confirmDeleteUmum(id, nama) {
        Swal.fire({
            title: 'Hapus Rekening?',
            text: "Data " + nama + " beserta histori tabungannya akan dihapus permanen!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}', showConfirmButton: false, timer: 2500 });
        @endif
        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Error!', html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' });
        @endif
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/keuangan/siswa/table_render.blade.php`
```php
{{-- resources/views/admin/keuangan/siswa/table_render.blade.php --}}
@php
    $tableId = uniqid('tbody_siswa_');
@endphp

<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
        <h6 class="mb-0 fw-bold text-primary"><i class="bi bi-wallet2 me-2"></i>Rekap Finansial - {{ $namaKelas }}</h6>
        
        <div class="d-flex align-items-center flex-wrap gap-3">
            <div class="input-group input-group-sm" style="width: 280px;">
                <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-0" placeholder="Cari Nama / NIS Siswa..." 
                       onkeyup="searchTableSiswa(this, '{{ $tableId }}')" aria-label="Cari Siswa">
            </div>
            
            <span class="badge bg-primary rounded-pill py-2 px-3">{{ $dataSiswa->count() }} Siswa</span>
        </div>
    </div>
    
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                        <th class="text-secondary" style="font-size: 12px; width: 32%">PROFIL SISWA</th>
                        <th class="text-secondary" style="font-size: 12px; width: 18%">KELAS & DETAIL SLOT</th>
                        <th class="text-secondary" style="font-size: 12px; width: 11%">TA AKTIF</th>
                        <th class="text-secondary text-end" style="font-size: 12px; width: 12%">TOTAL TAGIHAN</th>
                        <th class="text-secondary text-end" style="font-size: 12px; width: 12%">TERBAYAR</th>
                        <th class="text-center text-secondary" style="font-size: 12px; width: 10%">STATUS</th>
                        <th class="text-center text-secondary" style="font-size: 12px; width: 10%">AKSI</th>
                    </tr>
                </thead>
                <tbody id="{{ $tableId }}">
                    @forelse($dataSiswa as $loopIndex => $siswa)
                        @php
                            $totalTagihan = $totalTagihanGlobal ?? 0;
                            $totalDibayar = $siswa->total_terbayar ?? 0; 
                            $sisaTagihan = $totalTagihan - $totalDibayar;
                            
                            if($totalTagihan == 0) {
                                $statusKeu = 'Bebas Tagihan';
                            } else {
                                $statusKeu = ($totalDibayar >= $totalTagihan) ? 'Lunas' : (($totalDibayar > 0) ? 'Cicilan' : 'Belum Bayar');
                            }
                        @endphp
                        <tr class="row-siswa">
                            <td class="text-center text-muted">{{ $loop->iteration }}</td>
                            
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="{{ $siswa->foto ? asset('storage/siswa/' . $siswa->foto) : 'https://ui-avatars.com/api/?name='.urlencode($siswa->nama_lengkap).'&background=random&size=100' }}" 
                                         class="rounded-circle object-fit-cover shadow-sm me-3 border" style="width: 55px; height: 55px; aspect-ratio: 1/1;">
                                    
                                    <div class="data-pencarian">
                                        <span class="fw-bold text-primary d-block mb-1" style="font-size: 14px;">{{ $siswa->nama_lengkap }}</span>
                                        <div class="text-muted mb-1" style="font-size: 11px; line-height: 1.4;">
                                            <span class="d-block"><i class="bi bi-upc-scan me-1"></i> NIS: <strong class="text-dark">{{ $siswa->nis ?? '-' }}</strong></span>
                                            <span class="d-block"><i class="bi bi-person-vcard me-1"></i> NISN: <strong class="text-dark">{{ $siswa->nisn ?? '-' }}</strong></span>
                                            <span class="d-block"><i class="bi bi-geo-alt me-1"></i> {{ $siswa->tempat_lahir ?? '-' }}, {{ $siswa->tanggal_lahir ? \Carbon\Carbon::parse($siswa->tanggal_lahir)->format('d M Y') . ' M / ' . $siswa->tanggal_lahir_hijriyah : '-' }}</span>
                                            <span class="d-block text-secondary">
                                                <i class="bi bi-calendar-plus me-1"></i> Terdaftar: 
                                                @if($siswa->tahunAjaran)
                                                    <strong class="text-dark">{{ $siswa->tahunAjaran->tahun_ppdb_hijriyah ?? '-' }} H</strong> <span class="text-muted">[{{ $siswa->tahunAjaran->tahun_ppdb ?? '-' }} M]</span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </span>
                                        </div>
                                        <span class="badge {{ $siswa->jenis_kelamin == 'L' ? 'bg-primary' : 'bg-danger' }} bg-opacity-10 text-{{ $siswa->jenis_kelamin == 'L' ? 'primary' : 'danger' }} border border-{{ $siswa->jenis_kelamin == 'L' ? 'primary' : 'danger' }}" style="font-size: 9px; padding: 2px 6px;">
                                            <i class="bi {{ $siswa->jenis_kelamin == 'L' ? 'bi-gender-male' : 'bi-gender-female' }} me-1"></i>{{ $siswa->jenis_kelamin == 'L' ? 'Putra' : 'Putri' }}
                                        </span>
                                    </div>
                                </div>
                            </td>
                            
                            <td>
                                @if($siswa->kelas)
                                    <span class="fw-bold text-dark d-block" style="font-size: 13px;">{{ $siswa->kelas->tingkat->nama_tingkat ?? '' }} - {{ $siswa->kelas->nama_kelas }}</span>
                                    <small class="text-muted d-block mb-1" style="font-size: 11px;"><i class="bi bi-building me-1"></i>{{ $siswa->kelas->tingkat->jenjang->nama_jenjang ?? '-' }}</small>
                                @else
                                    <span class="badge bg-light text-muted border" style="font-size: 10px;">Belum Ada Kelas</span>
                                @endif
                            </td>
                            
                            <td>
                                @if($siswa->tahunAjaran)
                                    <span class="fw-medium text-dark d-block" style="font-size: 12px;">{{ $siswa->tahunAjaran->tahun_ajaran_hijriyah ?? '-' }} H</span>
                                    <small class="text-muted" style="font-size: 11px;">[{{ $siswa->tahunAjaran->tahun_ajaran ?? '-' }} M]</small>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>

                            <td class="text-end fw-bold text-danger" style="font-size: 13px;">Rp {{ number_format($totalTagihan, 0, ',', '.') }}</td>

                            <td class="text-end fw-bold text-success" style="font-size: 13px;">
                                Rp {{ number_format($totalDibayar, 0, ',', '.') }}
                                @if($sisaTagihan > 0 && $totalTagihan > 0)
                                    <div class="text-muted fw-normal" style="font-size: 10px;">Sisa: Rp {{ number_format($sisaTagihan, 0, ',', '.') }}</div>
                                @endif
                            </td>

                            <td class="text-center">
                                @if($statusKeu == 'Lunas')
                                    <span class="badge bg-success rounded-pill px-3" style="font-size: 11px;">Lunas</span>
                                @elseif($statusKeu == 'Cicilan')
                                    <span class="badge bg-warning text-dark rounded-pill px-3" style="font-size: 11px;">Cicilan</span>
                                @elseif($statusKeu == 'Bebas Tagihan')
                                    <span class="badge bg-secondary rounded-pill px-3" style="font-size: 11px;">Bebas</span>
                                @else
                                    <span class="badge bg-danger rounded-pill px-3" style="font-size: 11px;">Belum Bayar</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <a href="{{ route('admin.keuangan.siswa.transaksi', $siswa->id) }}" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1 shadow-sm" style="font-size: 12px; padding: 4px 8px;">
                                    <i class="bi bi-credit-card-2-front"></i> Transaksi
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                <i class="bi bi-people fs-1 d-block mb-2 text-black-50"></i>
                                Tidak ditemukan data siswa aktif untuk kelas <strong>{{ $namaKelas }}</strong>.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@once
<script>
    function searchTableSiswa(inputElement, tbodyId) {
        let filter = inputElement.value.toLowerCase();
        let tbody = document.getElementById(tbodyId);
        
        if (!tbody) return;
        
        let rows = tbody.getElementsByClassName('row-siswa');
        let visibleCount = 0;
        
        for (let i = 0; i < rows.length; i++) {
            let tdProfil = rows[i].getElementsByTagName("td")[1]; 
            
            if (tdProfil) {
                let textValue = tdProfil.textContent || tdProfil.innerText;
                if (textValue.toLowerCase().indexOf(filter) > -1) {
                    rows[i].style.display = "";
                    visibleCount++;
                } else {
                    rows[i].style.display = "none";
                }
            }
        }
        
        let emptyStateRow = tbody.querySelector('.search-empty-state');
        
        if (visibleCount === 0 && filter !== "") {
            if (!emptyStateRow) {
                let emptyHtml = `
                    <tr class="search-empty-state">
                        <td colspan="8" class="text-center py-4 text-danger fst-italic bg-light">
                            <i class="bi bi-search me-2"></i>Siswa dengan kata kunci "<strong>${filter}</strong>" tidak ditemukan.
                        </td>
                    </tr>`;
                tbody.insertAdjacentHTML('beforeend', emptyHtml);
            } else {
                emptyStateRow.querySelector('td').innerHTML = `<i class="bi bi-search me-2"></i>Siswa dengan kata kunci "<strong>${filter}</strong>" tidak ditemukan.`;
                emptyStateRow.style.display = "";
            }
        } else if (emptyStateRow) {
            emptyStateRow.style.display = "none";
        }
    }
</script>
@endonce
```

## File: `resources/views/admin/keuangan/siswa/index.blade.php`
```php
{{-- resources/views/admin/keuangan/siswa/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Data Keuangan Siswa')

@push('styles')
<style>
    .kelas-nav .nav-link { color: #495057; font-weight: 500; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.2s ease-in-out; border: 1px solid transparent; }
    .kelas-nav .nav-link:hover { background-color: #f8f9fa; border-color: #e9ecef; }
    .kelas-nav .nav-link.active { background-color: #0d6efd; color: #fff; border-color: #0d6efd; box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2); }
    .kelas-nav .nav-link .badge { background-color: #e9ecef !important; color: #495057 !important; }
    .kelas-nav .nav-link.active .badge { background-color: #fff !important; color: #0d6efd !important; }
    .sub-kelas-nav { background-color: #ffffff; border: 1px solid #dee2e6; border-radius: 6px; padding: 0.5rem; }
    .sub-kelas-nav .nav-link { font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: 4px; color: #6c757d; }
    .sub-kelas-nav .nav-link.active { background-color: #e9ecef; color: #212529; font-weight: bold; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h4 class="mb-1 fw-bold">Pembayaran & Tagihan Siswa</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">
                Rekapitulasi administrasi keuangan siswa <span class="text-primary fw-medium">{{ $jenjang->nama_jenjang }} - Tingkat {{ $tingkat->nama_tingkat }}</span>.
            </p>
        </div>
        
        <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 mb-0 bg-white p-2 rounded border shadow-sm">
            <label class="form-label mb-0 fw-medium text-nowrap text-muted" style="font-size: 13px;"><i class="bi bi-funnel me-1"></i>Tahun Ajaran:</label>
            <select name="tahun_ajaran_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()" style="min-width: 180px; font-size: 13px;">
                <option value="">-- Semua Tahun --</option>
                @foreach($tahunAjarans as $ta)
                    <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                        {{ $ta->tahun_ajaran }} {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}
                    </option>
                @endforeach
            </select>
        </form>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card shadow-sm border-0 border-start border-primary h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-muted fw-bold mb-1" style="font-size: 12px;">JUMLAH SISWA AKTIF</div>
                            <h4 class="mb-0 fw-bold text-primary">{{ number_format($globalJmlSiswa ?? 0, 0, ',', '.') }} <span style="font-size: 14px; font-weight: normal;" class="text-muted">Siswa</span></h4>
                        </div>
                        <div class="bg-primary bg-opacity-10 p-2 rounded-3">
                            <i class="bi bi-people text-primary fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0 border-start border-danger h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-danger fw-bold mb-1" style="font-size: 12px;">ESTIMASI TAGIHAN GLOBAL</div>
                            <h4 class="mb-0 fw-bold text-danger">Rp {{ number_format($globalTotalTagihan ?? 0, 0, ',', '.') }}</h4>
                        </div>
                        <div class="bg-danger bg-opacity-10 p-2 rounded-3">
                            <i class="bi bi-receipt text-danger fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm border-0 border-start border-success h-100" style="border-left-width: 4px !important;">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="text-success fw-bold mb-1" style="font-size: 12px;">TOTAL TERBAYAR</div>
                            <h4 class="mb-0 fw-bold text-success">Rp {{ number_format($globalTotalTerbayar ?? 0, 0, ',', '.') }}</h4>
                        </div>
                        <div class="bg-success bg-opacity-10 p-2 rounded-3">
                            <i class="bi bi-cash-stack text-success fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($daftarKelas->isEmpty())
        <div class="alert alert-info border-0 shadow-sm d-flex align-items-center bg-white py-4">
            <i class="bi bi-info-circle fs-3 me-3 text-info"></i>
            <div>
                <h6 class="mb-1 fw-bold">Belum Ada Kelas</h6>
                <p class="mb-0 small text-muted">Belum ada ruang kelas yang didaftarkan pada jenjang tingkat ini.</p>
            </div>
        </div>
    @else
        <div class="nav-wrapper position-relative mb-4">
            <ul class="nav nav-pills kelas-nav gap-2 bg-white p-2 rounded-3 shadow-sm border" id="kelasTab" role="tablist">
                @foreach($daftarKelas as $kelas)
                    <li class="nav-item flex-fill text-center" role="presentation">
                        <button class="nav-link w-100 mb-0 {{ $loop->first ? 'active' : '' }} d-flex justify-content-center align-items-center gap-2" data-bs-toggle="pill" data-bs-target="#kelas-{{ $kelas->id }}" type="button" role="tab">
                            <i class="bi bi-door-open"></i> {{ $kelas->nama_kelas }}
                            <span class="badge rounded-pill">{{ $siswasReal->where('kelas_id', $kelas->id)->count() }}</span>
                        </button>
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="tab-content" id="kelasTabContent">
            @foreach($daftarKelas as $kelas)
                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="kelas-{{ $kelas->id }}" role="tabpanel">
                    @if($kelas->details->isNotEmpty())
                        <ul class="nav nav-pills sub-kelas-nav mb-3 gap-1 shadow-sm" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#sub-all-{{ $kelas->id }}" type="button" role="tab"><i class="bi bi-collection"></i> Tampilkan Semua Slot</button>
                            </li>
                            @foreach($kelas->details as $detail)
                                @php
                                    $valDB = 'L';
                                    if($detail->gender) {
                                        $lower = strtolower($detail->gender->nama_gender);
                                        if (str_contains($lower, 'perempuan') || str_contains($lower, 'wanita') || str_contains($lower, 'putri') || str_contains($lower, 'banat') || $lower === 'p') { $valDB = 'P'; }
                                    }
                                @endphp
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#sub-{{ $detail->id }}" type="button" role="tab">
                                        Slot {{ $detail->gender->nama_gender ?? 'Campuran' }} ({{ $siswasReal->where('kelas_id', $kelas->id)->where('jenis_kelamin', $valDB)->count() }})
                                    </button>
                                </li>
                            @endforeach
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="sub-all-{{ $kelas->id }}" role="tabpanel">
                                @include('admin.keuangan.siswa.table_render', ['dataSiswa' => $siswasReal->where('kelas_id', $kelas->id), 'namaKelas' => $kelas->nama_kelas, 'totalTagihanGlobal' => $totalTagihanGlobal, 'paginator' => $siswasReal])
                            </div>
                            @foreach($kelas->details as $detail)
                                @php
                                    $valDB = 'L';
                                    if($detail->gender) {
                                        $lower = strtolower($detail->gender->nama_gender);
                                        if (str_contains($lower, 'perempuan') || str_contains($lower, 'wanita') || str_contains($lower, 'putri') || str_contains($lower, 'banat') || $lower === 'p') { $valDB = 'P'; }
                                    }
                                @endphp
                                <div class="tab-pane fade" id="sub-{{ $detail->id }}" role="tabpanel">
                                    @include('admin.keuangan.siswa.table_render', ['dataSiswa' => $siswasReal->where('kelas_id', $kelas->id)->where('jenis_kelamin', $valDB), 'namaKelas' => $kelas->nama_kelas . ' (Slot ' . ($detail->gender->nama_gender ?? '') . ')', 'totalTagihanGlobal' => $totalTagihanGlobal, 'paginator' => $siswasReal])
                                </div>
                            @endforeach
                        </div>
                    @else
                        @include('admin.keuangan.siswa.table_render', ['dataSiswa' => $siswasReal->where('kelas_id', $kelas->id), 'namaKelas' => $kelas->nama_kelas, 'totalTagihanGlobal' => $totalTagihanGlobal, 'paginator' => $siswasReal])
                    @endif
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection
```

## File: `resources/views/admin/keuangan/siswa/transaksi.blade.php`
```php
{{-- resources/views/admin/keuangan/siswa/transaksi.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Transaksi Keuangan Siswa')

@push('styles')
<style>
    .month-box { border: 2px solid #dee2e6; border-radius: 8px; padding: 10px; text-align: center; background-color: #fff; transition: all 0.2s; position: relative; }
    .month-box.lunas { border-color: #198754; background-color: #d1e7dd; color: #0f5132; }
    .month-box.cicilan { border-color: #ffc107; background-color: #fff3cd; color: #664d03; }
    .month-box.belum { border-color: #dc3545; background-color: #f8d7da; color: #842029; }
    .month-box.clickable-box { cursor: pointer; }
    .month-box.clickable-box:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); filter: brightness(0.95); }
    .custom-v-pills .nav-link { color: #495057; border-radius: 8px; font-weight: 500; font-size: 14px; padding: 10px 15px; margin-bottom: 5px; transition: all 0.3s ease; border: 1px solid #f8f9fa; background-color: #f8f9fa; }
    .custom-v-pills .nav-link:hover { background-color: #e9ecef; border-color: #dee2e6; }
    .custom-v-pills .nav-link.active { background-color: #e8f4fd; color: #0d6efd; border-color: #b6d4fe; font-weight: 700; box-shadow: inset 4px 0 0 0 #0d6efd; }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">

    @php
        if (!function_exists('hijriToMasehi')) {
            function hijriToMasehi($d, $m, $y) {
                $jd = (int)((11 * $y + 3) / 30) + 354 * $y + 30 * $m - (int)(($m - 1) / 2) + $d + 1948440 - 385;
                $l = $jd + 68569;
                $n = (int)((4 * $l) / 146097);
                $l = $l - (int)((146097 * $n + 3) / 4);
                $i = (int)((4000 * ($l + 1)) / 1461001);
                $l = $l - (int)((1461 * $i) / 4) + 31;
                $j = (int)((80 * $l) / 2447);
                $d_g = $l - (int)((2447 * $j) / 80);
                $l = (int)($j / 11);
                $m_g = $j + 2 - 12 * $l;
                $y_g = 100 * ($n - 49) + $i + $l;
                return sprintf("%04d-%02d-%02d", $y_g, $m_g, $d_g);
            }
        }

        if (!function_exists('terbilang')) {
            function terbilang($angka) {
                $angka = abs($angka);
                $baca = array("", "Satu", "Dua", "Tiga", "Empat", "Lima", "Enam", "Tujuh", "Delapan", "Sembilan", "Sepuluh", "Sebelas");
                $terbilang = "";
                if ($angka < 12) { $terbilang = " " . $baca[$angka]; } 
                else if ($angka < 20) { $terbilang = terbilang($angka - 10) . " Belas"; } 
                else if ($angka < 100) { $terbilang = terbilang($angka / 10) . " Puluh" . terbilang($angka % 10); } 
                else if ($angka < 200) { $terbilang = " Seratus" . terbilang($angka - 100); } 
                else if ($angka < 1000) { $terbilang = terbilang($angka / 100) . " Ratus" . terbilang($angka % 100); } 
                else if ($angka < 2000) { $terbilang = " Seribu" . terbilang($angka - 1000); } 
                else if ($angka < 1000000) { $terbilang = terbilang($angka / 1000) . " Ribu" . terbilang($angka % 1000); } 
                else if ($angka < 1000000000) { $terbilang = terbilang($angka / 1000000) . " Juta" . terbilang($angka % 1000000); }
                return $terbilang;
            }
        }

        $bulanMasehiIndo = [ 1 => 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember' ];
        
        $bulanAkademikHijri = [
            ['nama' => 'Syawal',       'idx' => 10, 'tambah_tahun' => 0],
            ['nama' => 'Dzulqa\'dah',  'idx' => 11, 'tambah_tahun' => 0],
            ['nama' => 'Dzulhijjah',   'idx' => 12, 'tambah_tahun' => 0],
            ['nama' => 'Muharram',     'idx' => 1,  'tambah_tahun' => 1],
            ['nama' => 'Safar',        'idx' => 2,  'tambah_tahun' => 1],
            ['nama' => 'Rabiul Awal',  'idx' => 3,  'tambah_tahun' => 1],
            ['nama' => 'Rabiul Akhir', 'idx' => 4,  'tambah_tahun' => 1],
            ['nama' => 'Jumadil Awal', 'idx' => 5,  'tambah_tahun' => 1],
            ['nama' => 'Jumadil Akhir','idx' => 6,  'tambah_tahun' => 1],
            ['nama' => 'Rajab',        'idx' => 7,  'tambah_tahun' => 1],
            ['nama' => 'Sya\'ban',     'idx' => 8,  'tambah_tahun' => 1],
            ['nama' => 'Ramadhan',     'idx' => 9,  'tambah_tahun' => 1],
        ];

        $profilSekolah = \App\Models\ProfilSekolah::first();
        $logoUrl = $profilSekolah && $profilSekolah->logo_path ? asset('storage/'.$profilSekolah->logo_path) : '';
        $namaMadrasah = $profilSekolah->nama_madrasah ?? 'Madrasah Al Idrus';
        $alamatMadrasah = $profilSekolah->alamat ?? '';
        $telpMadrasah = $profilSekolah->telepon ?? '-';
        $emailMadrasah = $profilSekolah->email ?? '-';
        $webMadrasah = $profilSekolah->website ?? '-';

        $jenjangSiswa = $siswa->kelas->tingkat->jenjang->nama_jenjang ?? '-';
        $tingkatSiswa = $siswa->kelas->tingkat->nama_tingkat ?? '-';
        $kelasSiswa = $siswa->kelas->nama_kelas ?? '-';
        $detailKelas = $jenjangSiswa . ' - ' . $tingkatSiswa . ' - ' . $kelasSiswa;
    @endphp

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">Detail Tagihan & Pembayaran</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola rincian transaksi cerdas atas nama <strong class="text-primary">{{ $siswa->nama_lengkap }}</strong>.</p>
        </div>
        <a href="{{ session('url_kembali_keuangan_siswa', route('admin.keuangan.siswa.tingkat', ['jenjang_id' => $siswa->kelas->tingkat->jenjang_id ?? 1, 'tingkat_id' => $siswa->kelas->tingkat_id ?? 1])) }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card shadow-sm border-0 h-100 position-sticky" style="top: 20px;">
                <div class="card-body text-center p-4">
                    <img src="{{ $siswa->foto ? asset('storage/siswa/' . $siswa->foto) : 'https://ui-avatars.com/api/?name='.urlencode($siswa->nama_lengkap).'&background=random&size=150' }}" 
                        class="rounded-circle object-fit-cover shadow-sm mb-3 border border-white" 
                        style="width: 100px; height: 100px; border-width: 3px !important;" alt="Foto Profil">
                    
                    <h5 class="fw-bold text-primary mb-1">{{ $siswa->nama_lengkap }}</h5>
                    <p class="text-muted mb-3" style="font-size: 13px;">NIS: {{ $siswa->nis ?? '-' }} | Kls: {{ $detailKelas }}</p>

                    <div class="text-start mt-4">
                        
                        <div class="p-3 bg-light rounded-3 border mb-3 shadow-sm border-start border-success" style="border-left-width: 4px !important;">
                            <h6 class="fw-bold text-secondary mb-3" style="font-size: 11px; letter-spacing: 0.5px;"><i class="bi bi-calendar3 me-1"></i> TAGIHAN GLOBAL (1 TAHUN PENUH)</h6>
                            <div class="d-flex justify-content-between align-items-center mb-2" style="font-size: 13px;">
                                <span class="text-muted">Estimasi Setahun:</span><strong class="text-dark">Rp {{ number_format($totalTagihanGlobal ?? $totalTagihan, 0, ',', '.') }}</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2" style="font-size: 13px;">
                                <span class="text-muted">Total Dibayar:</span><strong class="text-success">Rp {{ number_format($totalDibayarGlobal ?? $totalDibayar, 0, ',', '.') }}</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center" style="font-size: 13px;">
                                <span class="text-muted">Kekurangan Global:</span><strong class="text-danger">Rp {{ number_format($sisaTagihanGlobal ?? $sisaTagihan, 0, ',', '.') }}</strong>
                            </div>
                        </div>

                        <h6 class="fw-bold text-primary mb-2 mt-4" style="font-size: 12px; letter-spacing: 0.5px;">FILTER PERIODE TAGIHAN</h6>
                        <form action="{{ url()->current() }}" method="GET" class="mb-3 p-2 bg-white rounded-3 border border-primary border-opacity-25 shadow-sm">
                            <div class="mb-2">
                                <select name="tahun_ajaran_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()">
                                    @foreach($tahunAjarans as $ta)
                                        <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                                            TA: {{ $ta->tahun_ajaran_hijriyah }} H ({{ $ta->tahun_ajaran }} M)
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <select name="semester_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()">
                                    <option value="all" {{ $selectedSemId == 'all' ? 'selected' : '' }}>-- Semua {{ ucfirst($jenjang->sistem_akademik ?? 'Semester') }} --</option>
                                    @foreach($semesters as $sem)
                                        <option value="{{ $sem->id }}" {{ $selectedSemId == $sem->id ? 'selected' : '' }}>
                                            {{ $sem->nama }} {{ $sem->is_active ? '(Aktif)' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </form>

                        @if(($sisaTagihanPeriode ?? $sisaTagihan) <= 0 && ($totalTagihanPeriode ?? $totalTagihan) > 0)
                            <div class="p-3 mb-4 bg-success bg-opacity-10 border border-success border-opacity-25 rounded-3 text-center shadow-sm">
                                <div class="text-success fw-bold mb-1" style="font-size: 11px;">🟢 LUNAS (PERIODE INI)</div>
                                <h4 class="mb-0 fw-bold text-success">Rp 0</h4>
                            </div>
                        @else
                            <div class="p-3 mb-4 bg-danger bg-opacity-10 border border-danger border-opacity-25 rounded-3 text-center shadow-sm">
                                <div class="text-danger fw-bold mb-1" style="font-size: 11px;">🔴 KEKURANGAN (PERIODE INI)</div>
                                <h4 class="mb-0 fw-bold text-danger">Rp {{ number_format($sisaTagihanPeriode ?? $sisaTagihan, 0, ',', '.') }}</h4>
                            </div>
                        @endif

                        <h6 class="fw-bold text-secondary mb-3" style="font-size: 12px; letter-spacing: 0.5px;">PILIH ITEM TAGIHAN</h6>
                        <div class="nav flex-column nav-pills custom-v-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            @forelse($tarifs as $tarif)
                                @php
                                    $sisaItemMenu = $tarif->sisa ?? max(0, $tarif->total_tarif - ($tarif->terbayar ?? 0));
                                    $warnaIndikator = $sisaItemMenu <= 0 ? 'text-success' : (($tarif->terbayar > 0) ? 'text-warning' : 'text-danger');
                                    $iconIndikator = $sisaItemMenu <= 0 ? 'bi-check-circle-fill' : 'bi-circle-fill';
                                    
                                    $tipeKategori = $tarif->kategori->tipe ?? 'Umum';
                                    $berlakuUntuk = $tarif->tingkat_kelas_id ? 'Tingkat ' . ($tarif->tingkat->nama_tingkat ?? '') : 'Semua Tingkat';
                                @endphp
                                <button class="nav-link text-start d-flex justify-content-between align-items-center {{ $loop->first ? 'active' : '' }}" 
                                    id="v-pills-tarif-{{ $tarif->id }}-tab" data-bs-toggle="pill" data-bs-target="#v-pills-tarif-{{ $tarif->id }}" type="button" role="tab">
                                    <div class="text-truncate pe-2">
                                        <span class="d-block mb-1"><i class="bi {{ $iconIndikator }} {{ $warnaIndikator }} me-2" style="font-size: 10px;"></i>{{ $tarif->kategori->nama ?? '-' }}</span>
                                        
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary" style="font-size: 9px;">{{ $tipeKategori }}</span>
                                        <span class="badge {{ $tarif->tingkat_kelas_id ? 'bg-info text-dark border-info' : 'bg-primary bg-opacity-10 text-primary border-primary' }} border" style="font-size: 9px;">
                                            {{ $berlakuUntuk }}
                                        </span>
                                    </div>
                                    <i class="bi bi-chevron-right opacity-50"></i>
                                </button>
                            @empty
                                <div class="text-center text-muted p-3 border rounded-3 bg-white" style="font-size: 13px;">
                                    Tidak ada tagihan untuk periode ini.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8 mb-4">
            <h5 class="fw-bold text-dark mb-3"><i class="bi bi-layout-text-window-reverse me-2"></i>Rincian Tagihan Terpilih <span class="text-muted fs-6">({{ $activeTa->tahun_ajaran_hijriyah ?? '-' }} H)</span></h5>
            
            <div class="tab-content" id="v-pills-tabContent">
                @forelse($tarifs as $tarif)
                    @php 
                        $terbayar = $tarif->terbayar ?? 0;
                        $sisa = $tarif->sisa ?? 0;
                        $deposit = $tarif->deposit ?? 0;
                        $tipe = $tarif->kategori->tipe ?? 'Umum';
                        $berlakuUntuk = $tarif->tingkat_kelas_id ? 'Khusus Tingkat ' . ($tarif->tingkat->nama_tingkat ?? '') : 'Berlaku Semua Tingkat';
                        $persen = $tarif->total_tarif > 0 ? floor(($terbayar / $tarif->total_tarif) * 100) : 0;
                        if($persen > 100) $persen = 100;
                    @endphp

                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="v-pills-tarif-{{ $tarif->id }}" role="tabpanel">
                        <div class="card shadow-sm border-0 mb-4 overflow-hidden">
                            <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0 fw-bold text-primary">{{ $tarif->kategori->nama ?? '-' }}</h6>
                                    <small class="text-muted" style="font-size: 11px;">
                                        {{ $tipe }} | {{ $berlakuUntuk }} | Tarif: Rp {{ number_format($tarif->nominal, 0, ',', '.') }} x {{ $tarif->pengali }} Siklus
                                    </small>
                                </div>
                                <h5 class="mb-0 fw-bold text-dark">Rp {{ number_format($tarif->total_tarif, 0, ',', '.') }}</h5>
                            </div>
                            
                            <div class="card-body bg-light p-4">
                                
                                @if(in_array($tipe, ['Bulanan', 'Harian', 'Mingguan']))
                                    <div class="row g-2">
                                        @php
                                            $taHijriRaw = $tarif->tahunAjaran->tahun_ajaran_hijriyah ?? '1447/1448';
                                            $taHijriArr = explode('/', $taHijriRaw);
                                            $baseHijriYear = isset($taHijriArr[0]) ? (int)preg_replace('/[^0-9]/', '', $taHijriArr[0]) : 1447;
                                            
                                            $tglMulaiHijriRaw = $tarif->tahunAjaran->tgl_mulai_hijriyah ?? '10 Syawal 1447 H';
                                            preg_match('/^(\d+)/', $tglMulaiHijriRaw, $matches);
                                            $hariHijri = isset($matches[1]) ? (int)$matches[1] : 10;

                                            $startDate = $tarif->tahunAjaran->tgl_mulai ?? date('Y') . '-07-01';
                                            $akumulasiUangMasuk = $terbayar + $deposit; 
                                        @endphp

                                        @for($i = 1; $i <= $tarif->pengali; $i++)
                                            @php
                                                $uangUntukSiklusIni = $akumulasiUangMasuk - (($i - 1) * $tarif->nominal);
                                                $sisaUntukSiklusIni = 0;
                                                $isClickable = false;

                                                if($uangUntukSiklusIni >= $tarif->nominal) {
                                                    $class = 'lunas'; $icon = '<i class="bi bi-check-circle-fill"></i>'; $teks = 'Lunas';
                                                } elseif($uangUntukSiklusIni > 0) {
                                                    $sisaUntukSiklusIni = $tarif->nominal - $uangUntukSiklusIni;
                                                    $class = 'cicilan'; $icon = '<i class="bi bi-hourglass-split"></i>'; $teks = 'Sisa (Rp '.number_format($sisaUntukSiklusIni, 0, ',', '.').')';
                                                    $isClickable = true; 
                                                } else {
                                                    $sisaUntukSiklusIni = $tarif->nominal;
                                                    $class = 'belum'; $icon = '<i class="bi bi-x-circle-fill"></i>'; $teks = 'Belum Bayar';
                                                    $isClickable = true; 
                                                }

                                                if ($tipe == 'Bulanan') {
                                                    $idxBulan = ($i - 1) % 12;
                                                    $namaHijriTampil = $bulanAkademikHijri[$idxBulan]['nama'];
                                                    $bulanHijriNum = $bulanAkademikHijri[$idxBulan]['idx'];
                                                    $tahunHijriCalc = $baseHijriYear + $bulanAkademikHijri[$idxBulan]['tambah_tahun'];

                                                    $tanggalMasehiDB = hijriToMasehi($hariHijri, $bulanHijriNum, $tahunHijriCalc);
                                                    $approxMasehiTime = strtotime($tanggalMasehiDB);
                                                    
                                                    $labelHijriUtama = $hariHijri . ' ' . $namaHijriTampil . ' ' . $tahunHijriCalc . ' H';
                                                    $cleanHijriUtama = $labelHijriUtama;
                                                    $teksKeteranganOtomatis = "SPP Bulan {$namaHijriTampil} {$tahunHijriCalc} H";
                                                    $fullMasehi = date('d', $approxMasehiTime) . ' ' . $bulanMasehiIndo[(int)date('n', $approxMasehiTime)] . ' ' . date('Y', $approxMasehiTime);
                                                } else {
                                                    $stepDays = ($tipe == 'Mingguan') ? 7 : 1;
                                                    $approxMasehiTime = strtotime("+" . round(($i - 1) * $stepDays) . " days", strtotime($startDate));
                                                    $tanggalMasehiDB = date('Y-m-d', $approxMasehiTime);
                                                    $fullMasehi = date('d', $approxMasehiTime) . ' ' . $bulanMasehiIndo[(int)date('n', $approxMasehiTime)] . ' ' . date('Y', $approxMasehiTime);
                                                    
                                                    $labelHijriUtama = '<span class="text-hijri-render" data-date="'.$tanggalMasehiDB.'">Memuat...</span>';
                                                    $cleanHijriUtama = ''; 
                                                    $teksKeteranganOtomatis = "Siklus ke-{$i}";
                                                }
                                            @endphp
                                            
                                            <div class="col-md-4 col-sm-6">
                                                <div class="month-box {{ $class }} {{ $isClickable ? 'clickable-box shadow-sm' : 'opacity-75' }} d-flex flex-column h-100 justify-content-center"
                                                    @if($isClickable)
                                                        data-bs-toggle="modal" data-bs-target="#modalBayar{{ $tarif->id }}"
                                                        onclick="siapkanKeterangan('{{ $tarif->id }}', '{{ $teksKeteranganOtomatis }}', '{{ $tanggalMasehiDB }}', {{ $sisaUntukSiklusIni }}, '{{ $cleanHijriUtama }}')"
                                                    @endif
                                                >
                                                    <span class="fw-bold mb-0 text-truncate text-uppercase {{ $class == 'belum' ? 'text-danger' : 'text-success' }}" style="font-size: 13px; letter-spacing: 0.5px;" title="Siklus ke-{{ $i }}">{!! $labelHijriUtama !!}</span>
                                                    <span class="opacity-75 mb-2 text-muted d-block" style="font-size: 10px;"><i class="bi bi-globe2 me-1"></i>{{ $fullMasehi }} M</span>
                                                    <strong class="mb-1 text-dark" style="font-size: 13px;">Rp {{ number_format($tarif->nominal, 0, ',', '.') }}</strong>
                                                    <span style="font-size: 11px;">{!! $icon !!} {{ $teks }}</span>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>

                                @elseif(in_array($tipe, ['Sekali Bayar', 'Tahunan', 'Per Periode']))
                                    <div class="mb-2 d-flex justify-content-between align-items-end">
                                        <span class="fw-bold" style="font-size: 13px;">Progress Pembayaran</span>
                                        <span class="badge {{ $persen == 100 ? 'bg-success' : 'bg-primary' }} fs-6 shadow-sm">{{ $persen }}%</span>
                                    </div>
                                    <div class="progress mb-3 shadow-sm" style="height: 18px; border-radius: 10px; background-color:#dee2e6;">
                                        <div class="progress-bar {{ $persen == 100 ? 'bg-success' : 'bg-primary' }} progress-bar-striped {{ $persen < 100 ? 'progress-bar-animated' : '' }}" role="progressbar" style="width: {{ $persen }}%"></div>
                                    </div>
                                    <div class="d-flex justify-content-between text-muted" style="font-size: 13px;">
                                        <span class="bg-white px-2 py-1 rounded shadow-sm">Telah dibayar: <strong class="text-success">Rp {{ number_format($terbayar, 0, ',', '.') }}</strong></span>
                                        <span class="bg-white px-2 py-1 rounded shadow-sm">Kekurangan: <strong class="text-danger">Rp {{ number_format($sisa, 0, ',', '.') }}</strong></span>
                                    </div>

                                @else
                                    <div class="d-flex justify-content-between align-items-center border bg-white p-4 rounded-3 shadow-sm">
                                        <div>
                                            <span class="d-block text-muted mb-1" style="font-size: 12px;">Target / Estimasi Total</span>
                                            <h4 class="fw-bold mb-0 text-dark">Rp {{ number_format($tarif->total_tarif, 0, ',', '.') }}</h4>
                                        </div>
                                        <div class="text-end border-start ps-4">
                                            <span class="d-block text-muted mb-1" style="font-size: 12px;">Terkumpul Saat Ini</span>
                                            <h4 class="fw-bold mb-0 text-success">Rp {{ number_format($terbayar, 0, ',', '.') }}</h4>
                                        </div>
                                    </div>
                                @endif

                                @if($deposit > 0)
                                    <div class="alert alert-success mt-3 mb-0 border-0 shadow-sm py-2 px-3 d-flex justify-content-between align-items-center">
                                        <span style="font-size: 12px;"><i class="bi bi-info-circle-fill me-1"></i> Kelebihan bayar dicatat sebagai deposit item ini.</span>
                                        <strong class="fs-6">Deposit: Rp {{ number_format($deposit, 0, ',', '.') }}</strong>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="card-footer bg-white border-top-0 p-3 text-end">
                                <button class="btn btn-success fw-bold shadow-sm px-4" data-bs-toggle="modal" data-bs-target="#modalBayar{{ $tarif->id }}" onclick="resetKeterangan('{{ $tarif->id }}', {{ $tarif->nominal }})">
                                    <i class="bi bi-cash-coin me-1"></i> Input Pembayaran (Bebas)
                                </button>
                            </div>
                        </div>

                        @include('admin.keuangan.siswa.table_histori_item', ['tarif' => $tarif, 'siswa' => $siswa])

                        <div class="modal fade" id="modalBayar{{ $tarif->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header bg-success text-white border-bottom-0">
                                        <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="bi bi-wallet2 me-2"></i>Input Pembayaran Baru</h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form action="{{ route('admin.keuangan.siswa.bayar', $siswa->id) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="tarif_keuangan_id" value="{{ $tarif->id }}">
                                        
                                        <div class="modal-body p-4 text-start">
                                            <div class="mb-3">
                                                <label class="form-label fw-medium text-muted" style="font-size: 13px;">Item Pembayaran Terpilih</label>
                                                <div class="form-control bg-light fw-bold">{{ $tarif->kategori->nama ?? '-' }} ({{ $tipe }})</div>
                                            </div>
                                            
                                            <div class="row mb-3">
                                                <div class="col-6">
                                                    <label class="form-label fw-medium text-muted" style="font-size: 13px;">Sisa Kekurangan Tagihan</label>
                                                    <div class="form-control bg-light text-danger fw-bold" style="font-size: 14px;">Rp {{ number_format($sisa, 0, ',', '.') }}</div>
                                                </div>
                                                <div class="col-6">
                                                    <label class="form-label fw-medium text-muted" style="font-size: 13px;">Total Deposit Saat Ini</label>
                                                    <div class="form-control bg-light text-success fw-bold" style="font-size: 14px;">Rp {{ number_format($deposit, 0, ',', '.') }}</div>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label fw-bold text-dark">Nominal Uang Disetor <span class="text-danger">*</span></label>
                                                <div class="input-group input-group-lg shadow-sm">
                                                    <span class="input-group-text bg-success text-white fw-bold border-success">Rp</span>
                                                    <input type="number" name="nominal_bayar" id="nominal_bayar_{{ $tarif->id }}" class="form-control fw-bold text-success border-success" placeholder="Contoh: {{ $tarif->nominal }}" required min="1">
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label fw-bold text-success">Tanggal Pembayaran (Hijriyah) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-success fw-bold input-hijri-auto" id="add_hijri_tgl_bayar_{{ $tarif->id }}" placeholder="Memuat kalender..." readonly>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium text-muted" style="font-size: 13px;">Tanggal Anchor (Masehi)</label>
                                                <input type="date" name="tanggal_bayar" class="form-control bg-light input-masehi-anchor" data-target="add_hijri_tgl_bayar_{{ $tarif->id }}" value="{{ date('Y-m-d') }}" required>
                                            </div>

                                            <div class="mb-1">
                                                <label class="form-label fw-medium">Keterangan / Catatan Admin</label>
                                                <textarea name="keterangan" id="keterangan_admin_{{ $tarif->id }}" class="form-control fw-medium" rows="2" placeholder="Contoh: Titipan wali murid..."></textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-light border-top-0">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-success fw-bold px-4">Catat Pembayaran</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                @empty
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-body text-center py-5 text-muted">
                            <i class="bi bi-emoji-smile fs-1 d-block mb-3 text-black-50"></i>
                            <h5>Bersih, Belum Ada Tagihan!</h5>
                            <p class="mb-0">Tidak ada tanggungan untuk periode yang Anda pilih ini.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            @include('admin.keuangan.siswa.table_histori_global', ['historiPembayaran' => $historiPembayaran ?? collect()])
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function convertToHijriyah(dateString) {
        if (!dateString) return "";
        try {
            const dateObj = new Date(dateString);
            if (isNaN(dateObj.getTime())) return "";

            const formatter = new Intl.DateTimeFormat('id-ID-u-ca-islamic-umalqura', {
                day: 'numeric', month: 'long', year: 'numeric'
            });

            let hijriFormatterText = formatter.format(dateObj);
            if (!hijriFormatterText.endsWith('H') && !hijriFormatterText.endsWith('AH')) {
                hijriFormatterText += ' H';
            }
            return hijriFormatterText;
        } catch (error) {
            console.error("Gagal konversi kalender:", error);
            return "";
        }
    }

    function cetakKuitansi(idKuitansi, tglMasehi, tglHijriRaw, keterangan, nominal, terbilang) {
        let tglHijri = convertToHijriyah(tglHijriRaw);
        
        let logoMadrasah = "{!! $logoUrl !!}";
        let namaMadrasah = "{!! addslashes($namaMadrasah) !!}";
        let alamatMadrasah = "{!! addslashes($alamatMadrasah) !!}";
        let kontakMadrasah = "Telp/WA: {!! addslashes($telpMadrasah) !!} | Email: {!! addslashes($emailMadrasah) !!} | Web: {!! addslashes($webMadrasah) !!}";
        
        let namaSiswa = "{!! addslashes($siswa->nama_lengkap) !!}";
        let nisSiswa = "{{ $siswa->nis ?? '-' }}";
        let infoKelasSiswa = "{!! addslashes($detailKelas) !!}";
        let namaAdmin = "{{ Auth::user()->name ?? 'Administrator' }}";
        
        let printWindow = window.open('', '_blank', 'width=800,height=600');
        let imgTag = logoMadrasah ? `<img src="${logoMadrasah}" class="kop-logo">` : '';

        let htmlContent = `
            <html>
            <head>
                <title>Kuitansi Pembayaran - ${idKuitansi}</title>
                <style>
                    @page { size: 24.13cm 13.97cm; margin: 0.5cm; } /* Ukuran 9.5 x 5.5 Inch Continuous Form */
                    body { font-family: 'Courier New', Courier, monospace, Arial, sans-serif; font-size: 13px; margin: 0; padding: 0; color: #000; }
                    .print-container { width: 100%; max-width: 100%; border: 2px dashed #ccc; padding: 15px; box-sizing: border-box; position: relative; height: 12.97cm; }
                    
                    /* CSS KOP SURAT MODERN RESMI */
                    .kop-surat { display: flex; align-items: center; border-bottom: 3px double #000; padding-bottom: 10px; margin-bottom: 15px; }
                    .kop-logo { width: 70px; height: 70px; object-fit: contain; margin-right: 15px; }
                    .kop-text { flex: 1; text-align: center; }
                    .kop-text h2 { margin: 0; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-family: Arial, sans-serif;}
                    .kop-text p { margin: 2px 0; font-size: 10px; font-family: Arial, sans-serif; }
                    
                    .kuitansi-title { text-align: center; font-size: 16px; font-weight: bold; text-decoration: underline; margin-bottom: 15px; letter-spacing: 2px;}
                    
                    .info-top { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 12px; font-weight: bold; }
                    
                    .row-data { display: flex; margin-bottom: 8px; line-height: 1.5; }
                    .col-label { width: 25%; font-weight: bold; }
                    .col-separator { width: 2%; text-align: center; font-weight: bold; }
                    .col-value { width: 73%; border-bottom: 1px dotted #888; }
                    
                    .terbilang-box { background-color: #f9f9f9; padding: 6px 10px; font-style: italic; border: 1px solid #000; font-weight: bold; border-radius: 4px; margin-top: 5px; margin-bottom: 5px;}
                    
                    .footer-area { display: flex; justify-content: space-between; margin-top: 20px; align-items: flex-end; }
                    .nominal-besar { font-size: 22px; font-weight: bold; border: 2px solid #000; padding: 8px 15px; display: inline-block; background: #eee; border-radius: 5px;}
                    
                    .ttd-box { text-align: center; width: 30%; font-size: 12px;}
                    .ttd-space { height: 50px; }
                    .ttd-name { font-weight: bold; text-decoration: underline; }
                </style>
            </head>
            <body onload="window.print(); window.onafterprint = function(){ window.close(); }">
                <div class="print-container">
                    
                    <div class="kop-surat">
                        ${imgTag}
                        <div class="kop-text">
                            <h2>${namaMadrasah}</h2>
                            <p>${alamatMadrasah}</p>
                            <p>${kontakMadrasah}</p>
                        </div>
                    </div>
                    
                    <div class="kuitansi-title">KUITANSI PEMBAYARAN</div>
                    
                    <div class="info-top">
                        <div>No. Transaksi : ${idKuitansi}</div>
                        <div style="text-align: right;">Tanggal : ${tglHijri} <br><span style="font-size:10px; font-weight:normal;">(${tglMasehi} M)</span></div>
                    </div>

                    <div class="row-data">
                        <div class="col-label">Telah terima dari</div>
                        <div class="col-separator">:</div>
                        <div class="col-value"><strong>${namaSiswa}</strong></div>
                    </div>
                    <div class="row-data">
                        <div class="col-label">No. Induk (NIS)</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${nisSiswa}</div>
                    </div>
                    <div class="row-data">
                        <div class="col-label">Jenjang / Kelas</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${infoKelasSiswa}</div>
                    </div>
                    
                    <div class="row-data" style="align-items: center; margin-top: 10px;">
                        <div class="col-label">Uang sejumlah</div>
                        <div class="col-separator">:</div>
                        <div class="col-value terbilang-box" style="border-bottom: none;">## ${terbilang} Rupiah ##</div>
                    </div>

                    <div class="row-data">
                        <div class="col-label">Untuk Pembayaran</div>
                        <div class="col-separator">:</div>
                        <div class="col-value">${keterangan}</div>
                    </div>

                    <div class="footer-area">
                        <div>
                            <div class="nominal-besar">Rp ${Number(nominal).toLocaleString('id-ID')}</div>
                        </div>
                        <div class="ttd-box">
                            <div>Penerima / Bendahara</div>
                            <div class="ttd-space"></div>
                            <div class="ttd-name">${namaAdmin}</div>
                        </div>
                    </div>
                </div>
            </body>
            </html>
        `;
        
        printWindow.document.write(htmlContent);
        printWindow.document.close();
    }

    function siapkanKeterangan(tarifId, teksCatatan, tanggalDB, nominal, textHijriUtama) {
        document.getElementById('keterangan_admin_' + tarifId).value = teksCatatan;
        document.getElementById('nominal_bayar_' + tarifId).value = nominal;
        
        const dateInput = document.querySelector('input[name="tanggal_bayar"][data-target="add_hijri_tgl_bayar_' + tarifId + '"]');
        if(dateInput) dateInput.value = tanggalDB;

        const hijriInput = document.getElementById('add_hijri_tgl_bayar_' + tarifId);
        if(hijriInput) {
            if(textHijriUtama) {
                hijriInput.value = textHijriUtama;
            } else {
                hijriInput.value = convertToHijriyah(tanggalDB);
            }
        }
    }

    function resetKeterangan(tarifId, nominalDasar) {
        document.getElementById('keterangan_admin_' + tarifId).value = "Pembayaran Deposit / Titipan Bebas";
        document.getElementById('nominal_bayar_' + tarifId).value = nominalDasar;
    }

    document.addEventListener('DOMContentLoaded', function () {
        
        document.querySelectorAll('.text-hijri-render').forEach(el => {
            let masehiDate = el.getAttribute('data-date');
            if(masehiDate) {
                el.innerText = convertToHijriyah(masehiDate);
            }
        });

        document.querySelectorAll('.input-masehi-anchor').forEach(el => {
            const targetId = el.getAttribute('data-target');
            const targetEl = document.getElementById(targetId);
            
            if(targetEl && el.value) targetEl.value = convertToHijriyah(el.value);

            el.addEventListener('change', function() {
                if(targetEl) targetEl.value = convertToHijriyah(this.value);
            });
        });

        @if(session('success'))
            Swal.fire({
                icon: 'success', title: 'Berhasil!', text: '{{ session('success') }}',
                timer: 3000, showConfirmButton: false, toast: true, position: 'top-end'
            });
        @endif

        @if($errors->any())
            Swal.fire({
                icon: 'error', title: 'Oops... Gagal!', html: '{!! implode("<br>", $errors->all()) !!}', confirmButtonColor: '#d33'
            });
        @endif

        document.querySelectorAll('.btn-delete').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                const form = this.closest('.form-delete');
                Swal.fire({
                    title: 'Batalkan Transaksi?',
                    text: "Uang tagihan siswa akan kembali berkurang jika histori ini dihapus!",
                    icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Batalkan!', cancelButtonText: 'Tutup'
                }).then((result) => {
                    if (result.isConfirmed) form.submit();
                });
            });
        });
    });
</script>
@endsection
```

## File: `resources/views/admin/keuangan/siswa/table_histori_item.blade.php`
```php
{{-- resources/views/admin/keuangan/siswa/table_histori_item.blade.php --}}
<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white border-bottom py-3">
        <h6 class="mb-0 fw-bold text-secondary" style="font-size: 13px;"><i class="bi bi-clock-history me-2"></i>Histori Transaksi untuk {{ $tarif->kategori->nama ?? 'Item Ini' }}</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0" style="font-size: 13px;">
                <thead class="table-light">
                    <tr>
                        <th class="text-center text-secondary ps-3" style="width: 5%">NO</th>
                        <th class="text-secondary" style="width: 25%">TANGGAL (HIJRIYAH)</th>
                        <th class="text-secondary" style="width: 30%">KETERANGAN CATATAN</th>
                        <th class="text-end text-secondary" style="width: 25%">SETORAN (MASUK)</th>
                        <th class="text-center text-secondary pe-3" style="width: 15%">AKSI</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $historiItem = \App\Models\PembayaranKeuangan::where('siswa_id', $siswa->id)
                                            ->where('tarif_keuangan_id', $tarif->id)
                                            ->orderBy('tanggal_bayar', 'desc')
                                            ->get();
                    @endphp

                    @forelse($historiItem as $idxItem => $bayarItem)
                        <tr>
                            <td class="text-center text-muted ps-3">{{ $idxItem + 1 }}</td>
                            <td>
                                <span class="fw-bold text-dark d-block text-hijri-render" data-date="{{ $bayarItem->tanggal_bayar }}" style="font-size: 13px;">Memuat...</span>
                                <small class="text-muted" style="font-size: 10px;"><i class="bi bi-globe2 me-1"></i>{{ date('d-m-Y', strtotime($bayarItem->tanggal_bayar)) }} M</small>
                            </td>
                            <td class="text-muted">{{ $bayarItem->keterangan ?? '-' }}</td>
                            <td class="text-end fw-bold text-success">+ Rp {{ number_format($bayarItem->nominal_bayar, 0, ',', '.') }}</td>
                            <td class="text-center pe-3">
                                <div class="d-flex justify-content-center gap-1">
                                    <button type="button" class="btn btn-sm btn-outline-success d-inline-flex align-items-center" style="font-size: 10px; padding: 2px 5px;" 
                                        onclick="cetakKuitansi('INV-{{ str_pad($bayarItem->id, 5, '0', STR_PAD_LEFT) }}', '{{ date('d-m-Y', strtotime($bayarItem->tanggal_bayar)) }}', '{{ $bayarItem->tanggal_bayar }}', '{{ addslashes($bayarItem->keterangan ?? ($bayarItem->tarif->kategori->nama ?? '-')) }}', {{ $bayarItem->nominal_bayar }}, '{{ trim(terbilang($bayarItem->nominal_bayar)) }}')" title="Cetak Kuitansi">
                                        <i class="bi bi-printer"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-warning d-inline-flex align-items-center" style="font-size: 10px; padding: 2px 5px;" data-bs-toggle="modal" data-bs-target="#modalEditBayarItem{{ $bayarItem->id }}" title="Edit Transaksi">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form action="{{ route('admin.keuangan.siswa.bayar.destroy', $bayarItem->id) }}" method="POST" class="d-inline form-delete">
                                        @csrf @method('DELETE')
                                        <button type="button" class="btn btn-sm btn-outline-danger d-inline-flex align-items-center btn-delete" style="font-size: 10px; padding: 2px 5px;" title="Hapus Transaksi">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        <div class="modal fade text-start" id="modalEditBayarItem{{ $bayarItem->id }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 shadow">
                                    <div class="modal-header bg-warning border-bottom-0">
                                        <h5 class="modal-title fw-bold text-dark" style="font-size: 15px;"><i class="bi bi-pencil-square me-2"></i>Koreksi Transaksi</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <form action="{{ route('admin.keuangan.siswa.bayar.update', $bayarItem->id) }}" method="POST">
                                        @csrf @method('PUT')
                                        <div class="modal-body p-4">
                                            <div class="mb-3">
                                                <label class="form-label fw-medium">Koreksi Nominal Setoran <span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <span class="input-group-text bg-light fw-bold">Rp</span>
                                                    <input type="number" name="nominal_bayar" class="form-control fw-bold text-dark" value="{{ $bayarItem->nominal_bayar }}" min="1" required>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold text-warning-emphasis">Tanggal Pembayaran (Hijriyah) <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control border-warning fw-bold input-hijri-auto" id="edit_hijri_tgl_bayar_{{ $bayarItem->id }}" placeholder="Memuat kalender..." readonly>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-medium text-muted" style="font-size: 13px;">Tanggal Anchor (Masehi)</label>
                                                <input type="date" name="tanggal_bayar" class="form-control bg-light input-masehi-anchor" data-target="edit_hijri_tgl_bayar_{{ $bayarItem->id }}" value="{{ date('Y-m-d', strtotime($bayarItem->tanggal_bayar)) }}" required>
                                            </div>
                                            <div class="mb-1">
                                                <label class="form-label fw-medium">Keterangan / Catatan</label>
                                                <textarea name="keterangan" class="form-control" rows="2">{{ $bayarItem->keterangan }}</textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-light">
                                            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-warning btn-sm fw-bold text-dark">Simpan Koreksi</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted fst-italic">
                                Belum ada transaksi pembayaran untuk item ini.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
```

## File: `resources/views/admin/keuangan/siswa/table_histori_global.blade.php`
```php
{{-- resources/views/admin/keuangan/siswa/table_histori_global.blade.php --}}
<div class="card shadow-sm border-0">
    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold text-success"><i class="bi bi-list-columns-reverse me-2"></i>Log Histori Pembayaran Keseluruhan</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                        <th class="text-secondary" style="font-size: 12px; width: 20%">TANGGAL (HIJRIYAH)</th>
                        <th class="text-secondary" style="font-size: 12px; width: 25%">ITEM TAGIHAN</th>
                        <th class="text-secondary" style="font-size: 12px; width: 20%">CATATAN</th>
                        <th class="text-end text-secondary" style="font-size: 12px; width: 20%">NOMINAL SETORAN</th>
                        <th class="text-center text-secondary pe-4" style="font-size: 12px; width: 10%">AKSI</th>
                    </tr>
                </thead>
                <tbody>
                    @if(isset($historiPembayaran) && $historiPembayaran->count() > 0)
                        @foreach($historiPembayaran as $index => $bayar)
                            <tr>
                                <td class="text-center text-muted">{{ (method_exists($historiPembayaran, 'currentPage') ? ($historiPembayaran->currentPage() - 1) * $historiPembayaran->perPage() : 0) + $loop->iteration }}</td>
                                <td>
                                    <span class="fw-bold text-dark d-block text-hijri-render" data-date="{{ $bayar->tanggal_bayar }}" style="font-size: 14px;">Memuat...</span>
                                    <small class="text-muted" style="font-size: 11px;"><i class="bi bi-globe2 me-1"></i>{{ date('d-m-Y', strtotime($bayar->tanggal_bayar)) }} M</small>
                                </td>
                                <td>
                                    <span class="fw-bold text-primary d-block" style="font-size: 13px;">{{ $bayar->tarif->kategori->nama ?? 'Tagihan Dihapus' }}</span>
                                    <small class="text-muted" style="font-size: 11px;">TA: {{ $bayar->tarif->tahunAjaran->tahun_ajaran_hijriyah ?? '-' }} H</small>
                                </td>
                                <td><span class="text-muted" style="font-size: 12px;">{{ $bayar->keterangan ?? '-' }}</span></td>
                                <td class="text-end fw-bold text-success pe-4" style="font-size: 14px;">+ Rp {{ number_format($bayar->nominal_bayar, 0, ',', '.') }}</td>
                                <td class="text-center pe-4">
                                    <div class="d-flex justify-content-center gap-1">
                                        <button type="button" class="btn btn-sm btn-outline-success d-inline-flex align-items-center" style="font-size: 11px; padding: 4px 6px;" 
                                            onclick="cetakKuitansi('INV-{{ str_pad($bayar->id, 5, '0', STR_PAD_LEFT) }}', '{{ date('d-m-Y', strtotime($bayar->tanggal_bayar)) }}', '{{ $bayar->tanggal_bayar }}', '{{ addslashes($bayar->keterangan ?? ($bayar->tarif->kategori->nama ?? '-')) }}', {{ $bayar->nominal_bayar }}, '{{ trim(terbilang($bayar->nominal_bayar)) }}')" title="Cetak Kuitansi">
                                            <i class="bi bi-printer"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox fs-1 d-block mb-2 text-black-50"></i>
                                Belum ada histori pembayaran yang dicatat.
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
    
    @if(isset($historiPembayaran) && method_exists($historiPembayaran, 'hasPages') && $historiPembayaran->hasPages())
        <div class="card-footer bg-white border-top py-3 d-flex justify-content-between align-items-center">
            <div class="small text-muted">
                Menampilkan log {{ $historiPembayaran->firstItem() }}-{{ $historiPembayaran->lastItem() }} dari {{ $historiPembayaran->total() }} riwayat transaksi.
            </div>
            <div class="pagination-sm">
                {{ $historiPembayaran->links('pagination::bootstrap-5') }}
            </div>
        </div>
    @endif
</div>
```

## File: `resources/views/admin/keuangan/rekap/index.blade.php`
```php

```

## File: `resources/views/admin/jadwal-mapel/copy.blade.php`
```php
{{-- resources/views/admin/jadwal-mapel/copy.blade.php --}}
<div class="modal fade" id="modalSalinJadwal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="<?php echo route('admin.jadwal-mapel.copy'); ?>" method="POST">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="target_kelas_id" value="<?php echo $kelas_id; ?>">
            <input type="hidden" name="target_tahun_ajaran_id" value="<?php echo $currentTaId; ?>">
            <input type="hidden" name="target_semester_id" value="<?php echo $currentSemId; ?>">
            <input type="hidden" name="target_gender" value="<?php echo request('gender', 'Campur'); ?>">

            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0 bg-warning text-dark">
                    <h5 class="modal-title fw-bold"><i class="bi bi-copy"></i> Salin Jadwal Kelas Ini</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="alert alert-info border-0" style="font-size: 13px;">
                        Fungsi ini akan menyalin seluruh jadwal kelas <b><?php echo $kelasTerpilih->nama_kelas ?? ''; ?></b> 
                        dari riwayat periode sebelumnya ke periode yang sedang aktif saat ini.
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-medium">Salin Dari Tahun Ajaran <span class="text-danger">*</span></label>
                        <select name="source_tahun_ajaran_id" class="form-select" required>
                            <option value="">-- Pilih Tahun Ajaran --</option>
                            <?php if(isset($tahunAjarans)): ?>
                                <?php foreach($tahunAjarans as $ta): ?>
                                    <?php if($ta->id != $currentTaId): ?> 
                                        <option value="<?php echo $ta->id; ?>"><?php echo $ta->tahun_ajaran_hijriyah; ?> H (<?php echo $ta->tahun_ajaran; ?> M)</option>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-medium text-capitalize">Salin Dari Periode <span class="text-danger">*</span></label>
                        <select name="source_semester_id" class="form-select" required>
                            <option value="">-- Pilih Periode --</option>
                            <?php if(isset($filteredSemesters) && $filteredSemesters->count() > 0): ?>
                                <?php foreach($filteredSemesters as $sem): ?>
                                    <option value="<?php echo $sem->id; ?>"><?php echo $sem->nama; ?></option>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <option value="">Belum ada periode tersimpan</option>
                            <?php endif; ?>
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-top-0 bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning text-dark fw-bold"><i class="bi bi-clipboard-check me-1"></i> Proses Salin</button>
                </div>
            </div>
        </form>
    </div>
</div>
```

## File: `resources/views/admin/jadwal-mapel/create.blade.php`
```php
{{-- resources/views/admin/jadwal-mapel/create.blade.php --}}
<div class="modal fade" id="modalTambahJadwal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="<?php echo route('admin.jadwal-mapel.store'); ?>" method="POST">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="kelas_id" value="<?php echo $kelas_id; ?>">
            <input type="hidden" name="jam_mulai" id="input_jam_mulai">
            <input type="hidden" name="jam_selesai" id="input_jam_selesai">
            
            <!-- TAMBAHAN BARU: Hidden input nama hari & keterangan -->
            <input type="hidden" name="hari" id="input_hari_hidden" required>
            <input type="hidden" name="keterangan" id="input_keterangan"> 

            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0 bg-light">
                    <h5 class="modal-title fw-bold">Atur Jadwal (Kelas <?php echo $kelasTerpilih->nama_kelas ?? ''; ?> <?php echo request('gender') != 'Campur' ? request('gender') : ''; ?>)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    
                    <div class="row g-2 mb-3 bg-white p-2 rounded border">
                        <div class="col-6">
                            <label class="form-label fw-medium" style="font-size: 12px;">Tahun Ajaran</label>
                            <select name="tahun_ajaran_id" class="form-select form-select-sm bg-light" style="pointer-events: none;" readonly>
                                <?php if(isset($tahunAjarans)): ?>
                                    <?php foreach($tahunAjarans as $ta): ?>
                                        <option value="<?php echo $ta->id; ?>" <?php if($currentTaId == $ta->id) echo 'selected'; ?>>
                                            <?php echo $ta->tahun_ajaran_hijriyah; ?> H (<?php echo $ta->tahun_ajaran; ?> M)
                                        </option>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <option value="<?php echo $currentTaId; ?>"><?php echo $taAktif->tahun_ajaran_hijriyah ?? 'Aktif'; ?> H</option>
                                <?php endif; ?>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-medium text-capitalize" style="font-size: 12px;">Periode (<?php echo $jenjang->sistem_akademik ?? 'Semester'; ?>)</label>
                            <select name="semester_id" class="form-select form-select-sm bg-light" style="pointer-events: none;" readonly>
                                <?php if(isset($filteredSemesters) && $filteredSemesters->count() > 0): ?>
                                    <?php foreach($filteredSemesters as $sem): ?>
                                        <option value="<?php echo $sem->id; ?>" <?php if($currentSemId == $sem->id) echo 'selected'; ?>><?php echo $sem->nama; ?></option>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <option value="<?php echo $currentSemId; ?>">Periode Aktif</option>
                                <?php endif; ?>
                            </select>
                        </div>
                    </div>

                    <!-- BARIS ALOKASI WAKTU BERTINGKAT (HARI -> KATEGORI -> WAKTU) -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label fw-medium">1. Hari Terpilih</label>
                            <input type="text" id="input_hari_readonly" class="form-control bg-light fw-bold text-uppercase" readonly>
                        </div>

                        <div class="col-md-4" id="box_kategori" style="display: none;">
                            <label class="form-label fw-medium">2. Pilih Kategori <span class="text-danger">*</span></label>
                            <select id="select_kategori" class="form-select border-primary" required disabled>
                                <option value="">-- Menunggu Hari... --</option>
                            </select>
                        </div>

                        <div class="col-md-4" id="box_waktu" style="display: none;">
                            <label class="form-label fw-medium">3. Pilih Waktu <span class="text-danger">*</span></label>
                            <select id="select_alokasi" class="form-select border-primary" required disabled>
                                <option value="">-- Pilih Kategori Dulu --</option>
                            </select>
                        </div>
                    </div>

                    <div id="info_non_mapel" class="alert alert-warning d-none border-0 shadow-sm" style="font-size: 13px;">
                        <i class="bi bi-info-circle-fill me-1"></i> <strong>Waktu Khusus:</strong> <span id="text_keterangan"></span>.<br>
                        Waktu ini bukan dialokasikan untuk mata pelajaran. Anda tidak perlu memasukkan data guru.
                    </div>

                    <div class="row g-3 mb-3" id="box_mapel" style="display: none;">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">4a. Pilih Guru <span class="text-danger">*</span></label>
                            <select id="select_guru" class="form-select">
                                <option value="">-- Pilih Guru Dahulu --</option>
                                <?php if(isset($gurusUnik)): ?>
                                    <?php foreach($gurusUnik as $guru): ?>
                                        <option value="<?php echo $guru->id; ?>"><?php echo $guru->nama_lengkap; ?></option>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">4b. Pilih Mata Pelajaran <span class="text-danger">*</span></label>
                            <select name="guru_mapel_id" id="select_guru_mapel" class="form-select" disabled>
                                <option value="">-- Menunggu Pilihan Guru --</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3" id="box_gender" style="display: none;">
                        <label class="form-label fw-medium">5. Target Peserta <i class="bi bi-info-circle text-muted ms-1"></i></label>
                        <select id="select_target_gender_display" class="form-select bg-light" disabled>
                            <option value="Campur">Campur / Berlaku Semua</option>
                            <option value="Putra">Putra</option>
                            <option value="Putri">Putri</option>
                        </select>
                        <input type="hidden" name="target_gender" id="select_target_gender" value="Campur">
                    </div>

                </div>
                <div class="modal-footer border-top-0 bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" id="btn_simpan_jadwal" class="btn btn-primary" disabled><i class="bi bi-save me-1"></i> Simpan Jadwal</button>
                </div>
            </div>
        </form>
    </div>
</div>
```

## File: `resources/views/admin/jadwal-mapel/index.blade.php`
```php
{{-- resources/views/admin/jadwal-mapel/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Jadwal Mata Pelajaran')

@section('content')
<div class="container-fluid py-4">

    <?php
        $currentTaId = request('tahun_ajaran_id', $taAktif->id ?? null);
        $filteredSemesters = isset($semesters) ? $semesters->where('jenis_periode', $jenjang->sistem_akademik) : collect();
        $currentSemId = request('semester_id');
        $isInvalid = true;
        
        if ($currentSemId) {
            if ($filteredSemesters->contains('id', $currentSemId)) {$isInvalid = false;
            }
        }
        
        if ($isInvalid) {
            $defaultSem =$filteredSemesters->where('is_active', 1)->first() ?? $filteredSemesters->first();$currentSemId = $defaultSem ? $defaultSem->id : null;
        }
        
        $activeGender = request('gender', 'Campur');
    ?>

    <div class="mb-4 d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div>
            <h4 class="mb-1 fw-bold">Jadwal Mapel - Jenjang <?php echo $jenjang->nama_jenjang; ?></h4>
            <p class="text-muted mb-0" style="font-size: 14px;">
                Kelola jadwal mata pelajaran berdasarkan Ruang Kelas, Tahun Ajaran, dan <span class="text-primary fw-bold text-capitalize"><?php echo $jenjang->sistem_akademik; ?></span>.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 col-lg-2 mb-4">
            @include('admin.jadwal-mapel.sidebar')
        </div>

        <div class="col-md-8 col-lg-10">
            <?php if(!$kelas_id): ?>
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center text-center p-5 text-muted">
                        <i class="bi bi-calendar2-week fs-1 mb-3 opacity-50"></i>
                        <h5 class="fw-bold">Belum Ada Kelas yang Dipilih</h5>
                        <p class="mb-4">Silakan pilih ruang kelas spesifik pada panel di sebelah kiri untuk melihat jadwal.</p>
                        
                        <form action="<?php echo url()->current(); ?>" method="GET" class="d-flex justify-content-center align-items-center gap-2 m-0 bg-light p-2 rounded-3 border">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-funnel text-muted ms-2 me-1"></i>
                                <select name="tahun_ajaran_id" class="form-select form-select-sm border-0 shadow-none fw-medium text-dark bg-transparent" onchange="this.form.submit()" style="min-width: 300px; padding-right: 2.5rem !important; cursor: pointer;">
                                    <?php if(isset($tahunAjarans)): ?>
                                        <?php foreach($tahunAjarans as$ta): ?>
                                            <option value="<?php echo $ta->id; ?>" <?php if($currentTaId ==$ta->id) echo 'selected'; ?>>
                                                <?php echo $ta->tahun_ajaran_hijriyah; ?> H (<?php echo$ta->tahun_ajaran; ?> M)
                                            </option>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </select>
                            </div>
                            <div class="vr bg-secondary opacity-25"></div>
                            <select name="semester_id" class="form-select form-select-sm border-0 shadow-none fw-medium text-dark bg-transparent" onchange="this.form.submit()" style="min-width: 140px; cursor: pointer;">
                                <?php if($filteredSemesters->count() > 0): ?>
                                    <?php foreach($filteredSemesters as$sem): ?>
                                        <option value="<?php echo $sem->id; ?>" <?php if($currentSemId == $sem->id) echo 'selected'; ?>><?php echo$sem->nama; ?></option>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <option value="">Belum ada <?php echo $jenjang->sistem_akademik; ?></option>
                                <?php endif; ?>
                            </select>
                        </form>
                    </div>
                </div>
            <?php else: ?>
                <div class="card border-0 shadow-sm mb-4 border-top border-primary" style="border-top-width: 4px !important;">
                    <div class="card-body p-4">
                        
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4 border-bottom pb-3">
                            <h5 class="fw-bold text-primary mb-0 d-flex align-items-center">
                                <i class="bi bi-calendar3 me-2 text-primary"></i> 
                                Jadwal Kelas: <?php echo $kelasTerpilih->nama_kelas ?? ''; ?> 
                                <?php if($activeGender != 'Campur'): ?>
                                    <span class="badge bg-secondary ms-2 fw-normal fs-6"><?php echo $activeGender; ?></span>
                                <?php endif; ?>
                            </h5>

                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <form action="<?php echo url()->current(); ?>" method="GET" class="d-flex align-items-center gap-2 m-0 bg-light p-1 rounded-3 border">
                                    <?php if(request('gender')): ?>
                                        <input type="hidden" name="gender" value="<?php echo request('gender'); ?>">
                                    <?php endif; ?>
                                    
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-funnel text-muted ms-2 me-1"></i>
                                        <select name="tahun_ajaran_id" class="form-select form-select-sm border-0 shadow-none fw-medium text-dark bg-transparent" onchange="this.form.submit()" style="min-width: 300px; padding-right: 2.5rem !important; cursor: pointer;">
                                            <?php if(isset($tahunAjarans)): ?>
                                                <?php foreach($tahunAjarans as$ta): ?>
                                                    <option value="<?php echo $ta->id; ?>" <?php if($currentTaId ==$ta->id) echo 'selected'; ?>>
                                                        <?php echo $ta->tahun_ajaran_hijriyah; ?> H (<?php echo $ta->tahun_ajaran; ?> M) <?php if($ta->status_akademik == 'aktif') echo '(Aktif)'; ?>
                                                    </option>
                                                <?php endforeach; ?>
                                            <?php else: ?>
                                                <option value="<?php echo $taAktif->id ?? ''; ?>"><?php echo $taAktif->tahun_ajaran_hijriyah ?? 'Tahun Aktif'; ?> H</option>
                                            <?php endif; ?>
                                        </select>
                                    </div>
                                    
                                    <div class="vr bg-secondary opacity-25"></div>
                                    <select name="semester_id" class="form-select form-select-sm border-0 shadow-none fw-medium text-dark bg-transparent" onchange="this.form.submit()" style="min-width: 140px; cursor: pointer;">
                                        <?php if($filteredSemesters->count() > 0): ?>
                                            <?php foreach($filteredSemesters as$sem): ?>
                                                <option value="<?php echo $sem->id; ?>" <?php if($currentSemId ==$sem->id) echo 'selected'; ?>>
                                                    <?php echo $sem->nama; ?> <?php if($sem->is_active) echo '(Aktif)'; ?>
                                                </option>
                                            <?php endforeach; ?>
                                        <?php else: ?>
                                            <option value="">Belum ada <?php echo $jenjang->sistem_akademik; ?></option>
                                        <?php endif; ?>
                                    </select>
                                </form>

                                <?php if($kelas_id && $currentTaId &&$currentSemId): ?>
                                    <button type="button" class="btn btn-warning btn-sm d-flex align-items-center gap-1 shadow-sm text-dark fw-bold" data-bs-toggle="modal" data-bs-target="#modalSalinJadwal">
                                        <i class="bi bi-copy"></i> Salin
                                    </button>
                                <?php endif; ?>
                            </div>
                        </div>
                        
                        <div class="row g-3">
                            <?php if(isset($hariArr)): ?>
                                <?php foreach($hariArr as$hari): ?>
                                    <div class="col-md-6 col-lg-4 col-xl-3"> 
                                        <div class="card h-100 border shadow-none bg-light">
                                            <div class="card-header py-2 bg-secondary text-white fw-bold d-flex justify-content-between align-items-center">
                                                <span class="flex-grow-1 text-center ps-4"><?php echo strtoupper($hari); ?></span>
                                                <!-- TOMBOL TAMBAH DI HEADER HARI -->
                                                <button type="button" class="btn btn-sm btn-light py-0 px-2 fw-bold text-primary shadow-sm btn-tambah-hari" data-bs-toggle="modal" data-bs-target="#modalTambahJadwal" data-hari="<?php echo $hari; ?>">
                                                    <i class="bi bi-plus-lg"></i>
                                                </button>
                                            </div>
                                            <div class="card-body p-2" style="font-size: 13px;">
                                                <?php
                                                    $jadwalHariIni = collect();
                                                    if(isset($jadwals[$hari])) {$jadwalHariIni = $jadwals[$hari]->filter(function($j) use ($activeGender) {
                                                            $tgt =$j->target_gender;
                                                            
                                                            if(empty($tgt) or$tgt == 'Campur') {
                                                                return true; 
                                                            }
                                                            
                                                            $tgtAlias =$tgt;
                                                            if(in_array($tgt, ['Laki-laki', 'Putra'])) {$tgtAlias = 'Putra';
                                                            } elseif(in_array($tgt, ['Perempuan', 'Putri'])) {$tgtAlias = 'Putri';
                                                            }
                                                            
                                                            return $tgtAlias ==$activeGender;
                                                        });
                                                    }
                                                ?>

                                                <?php if($jadwalHariIni->count() > 0): ?>
                                                    <?php $urutanMapel = 1; // Variabel untuk menghitung urutan jam mapel per hari ?>
                                                    <?php foreach($jadwalHariIni as$jdwl): ?>
                                                        <?php
                                                            $borderColor = 'border-warning';
                                                            $isMapel = false;

                                                            if($jdwl->guru_mapel_id) {$isMapel = true;
                                                                $jTgt =$jdwl->target_gender;
                                                                $tgtAlias = 'Campur';
                                                                
                                                                if(in_array($jTgt, ['Laki-laki', 'Putra'])) {$tgtAlias = 'Putra';
                                                                } elseif(in_array($jTgt, ['Perempuan', 'Putri'])) {$tgtAlias = 'Putri';
                                                                }
                                                                
                                                                $borderColor = 'border-secondary';
                                                                if($tgtAlias == 'Putra') {$borderColor = 'border-primary';
                                                                } elseif($tgtAlias == 'Putri') {$borderColor = 'border-danger';
                                                                }
                                                            }
                                                        ?>

                                                        <div class="bg-white p-2 rounded mb-2 position-relative shadow-sm border-start <?php echo $borderColor; ?> border-3">
                                                            <div class="d-flex justify-content-between align-items-start mb-1">
                                                                <span class="badge <?php echo $isMapel ? 'bg-success' : 'bg-warning text-dark'; ?>">
                                                                    <i class="bi bi-clock me-1"></i> 
                                                                    <?php if($isMapel): ?>
                                                                        Jam ke <?php echo $urutanMapel++; ?>: 
                                                                    <?php endif; ?>
                                                                    <?php echo substr($jdwl->jam_mulai, 0, 5) . ' - ' . substr($jdwl->jam_selesai, 0, 5); ?>
                                                                </span>
                                                                <form action="<?php echo route('admin.jadwal-mapel.destroy', $jdwl->id); ?>" method="POST" id="form-delete-<?php echo $jdwl->id; ?>">
                                                                    <?php echo csrf_field(); ?>
                                                                    <?php echo method_field('DELETE'); ?>
                                                                    <button type="button" class="btn btn-sm btn-link text-danger p-0 m-0" onclick="confirmDelete(<?php echo $jdwl->id; ?>)"><i class="bi bi-x-circle-fill"></i></button>
                                                                </form>
                                                            </div>
                                                            
                                                            <?php if($isMapel): ?>
                                                                <div class="fw-bold text-dark text-truncate" title="<?php echo $jdwl->guruMapel->mapel->nama_mapel ?? ''; ?>"><?php echo $jdwl->guruMapel->mapel->nama_mapel ?? ''; ?></div>
                                                                <div class="text-muted text-truncate" style="font-size: 11px;" title="<?php echo $jdwl->guruMapel->guru->nama_lengkap ?? ''; ?>"><i class="bi bi-person me-1"></i> <?php echo $jdwl->guruMapel->guru->nama_lengkap ?? ''; ?></div>
                                                            <?php else: ?>
                                                                <div class="fw-bold text-warning text-truncate"><i class="bi bi-cup-hot me-1"></i> <?php echo $jdwl->keterangan ?? 'Waktu Khusus'; ?></div>
                                                                <div class="text-muted text-truncate" style="font-size: 11px;">Non-KBM (Umum)</div>
                                                            <?php endif; ?>
                                                        </div>
                                                    <?php endforeach; ?>
                                                <?php else: ?>
                                                    <div class="text-center text-muted py-3 fst-italic opacity-50">Kosong</div>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>

                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php if($kelas_id): ?>
    @include('admin.jadwal-mapel.create')
    @include('admin.jadwal-mapel.copy')
<?php endif; ?>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id) {
        Swal.fire({
            title: 'Hapus Jadwal?', text: "Jadwal ini akan dihapus dari kelas.", icon: 'warning',
            showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#6c757d', confirmButtonText: 'Ya, Hapus!'
        }).then((result) => {
            if (result.isConfirmed) { document.getElementById('form-delete-' + id).submit(); }
        });
    }

    window.guruMapelsData = <?php echo json_encode($guruMapels ?? []); ?>;
    window.activeGenderUrl = "<?php echo request('gender', 'Campur'); ?>";
    window.alokasiData = [];

    // FUNGSI KETIKA TOMBOL "+" DI HEADER HARI DIKLIK
    document.querySelectorAll('.btn-tambah-hari').forEach(btn => {
        btn.addEventListener('click', function() {
            let hariTerpilih = this.getAttribute('data-hari');
            let inputHari = document.getElementById('input_hari_readonly');
            let hiddenHari = document.getElementById('input_hari_hidden');
            
            if(inputHari && hiddenHari) {
                inputHari.value = hariTerpilih;
                hiddenHari.value = hariTerpilih;
                
                // Panggil ulang data dari server via AJAX
                fetchWaktuByHari(hariTerpilih);
            }
        });
    });

    // FUNGSI AJAX: MENGAMBIL DATA DAN MENYIAPKAN OPSI KATEGORI
    function fetchWaktuByHari(hari) {
        let boxKategori = document.getElementById('box_kategori');
        let selectKategori = document.getElementById('select_kategori');
        let boxWaktu = document.getElementById('box_waktu');
        let selectAlokasi = document.getElementById('select_alokasi');
        let boxMapel = document.getElementById('box_mapel');
        let boxGender = document.getElementById('box_gender');
        let infoNonMapel = document.getElementById('info_non_mapel');
        let btnSimpan = document.getElementById('btn_simpan_jadwal');

        // Reset UI Form ke bawah
        if(boxKategori) boxKategori.style.display = 'none';
        if(selectKategori) { selectKategori.innerHTML = '<option value="">-- Mengambil Data... --</option>'; selectKategori.disabled = true; }
        if(boxWaktu) boxWaktu.style.display = 'none'; 
        if(boxMapel) boxMapel.style.display = 'none'; 
        if(boxGender) boxGender.style.display = 'none'; 
        if(infoNonMapel) infoNonMapel.classList.add('d-none');
        if(btnSimpan) btnSimpan.disabled = true; 

        if(!hari) return;

        fetch(`/admin/alokasi-waktu/hari/${hari}/jenjang/<?php echo $jenjang->id ?? ''; ?>`)
            .then(response => response.json())
            .then(data => {
                window.alokasiData = data; // Simpan seluruh data hari ini
                
                if(selectKategori) {
                    selectKategori.innerHTML = '<option value="">-- Pilih Kategori --</option>';
                    if(data.length === 0) {
                        selectKategori.innerHTML = '<option value="">Belum ada alokasi waktu</option>';
                        selectKategori.disabled = true;
                    } else {
                        // Ambil daftar kategori unik dari data yang di-fetch
                        let uniqueCategories = [...new Set(data.map(item => item.kategori))];
                        uniqueCategories.forEach(kat => {
                            if(kat) { // Pastikan kategori tidak kosong
                                selectKategori.innerHTML += `<option value="${kat}">${kat}</option>`;
                            }
                        });
                        selectKategori.disabled = false;
                    }
                }
                if(boxKategori) boxKategori.style.display = 'block';
            }).catch(error => { console.error('Error:', error); });
    }

    document.addEventListener('change', function(e) {
        
        // JIKA ADMIN MEMILIH KATEGORI (PAGI / SIANG)
        if (e.target && e.target.id === 'select_kategori') {
            let kategoriTerpilih = e.target.value;
            let boxWaktu = document.getElementById('box_waktu');
            let selectAlokasi = document.getElementById('select_alokasi');
            
            let boxMapel = document.getElementById('box_mapel');
            let boxGender = document.getElementById('box_gender');
            let infoNonMapel = document.getElementById('info_non_mapel');
            let btnSimpan = document.getElementById('btn_simpan_jadwal');

            // Sembunyikan dan reset elemen di bawahnya
            if(boxMapel) boxMapel.style.display = 'none'; 
            if(boxGender) boxGender.style.display = 'none'; 
            if(infoNonMapel) infoNonMapel.classList.add('d-none');
            if(btnSimpan) btnSimpan.disabled = true;

            if(!kategoriTerpilih) {
                if(boxWaktu) boxWaktu.style.display = 'none';
                return;
            }

            // Filter Waktu hanya untuk Kategori yang dipilih
            let filteredWaktu = window.alokasiData.filter(item => item.kategori === kategoriTerpilih);

            if(selectAlokasi) {
                selectAlokasi.innerHTML = '<option value="">-- Pilih Waktu --</option>';
                filteredWaktu.forEach(item => {
                    let jamM = item.jam_mulai.substring(0, 5); let jamS = item.jam_selesai.substring(0, 5);
                    let tipe = item.is_mapel ? 'KBM' : 'NON-KBM'; let ket = item.keterangan ? ` - ${item.keterangan}` : '';
                    selectAlokasi.innerHTML += `<option value="${item.id}">${jamM} - ${jamS} [${tipe}]${ket}</option>`;
                });
                selectAlokasi.disabled = false;
            }
            if(boxWaktu) boxWaktu.style.display = 'block';
        }

        // JIKA ADMIN MEMILIH WAKTU
        if (e.target && e.target.id === 'select_alokasi') {
            let selectedId = e.target.value;
            let selectedData = window.alokasiData.find(x => x.id == selectedId);

            let boxMapel = document.getElementById('box_mapel');
            let boxGender = document.getElementById('box_gender');
            let infoNonMapel = document.getElementById('info_non_mapel');
            let btnSimpan = document.getElementById('btn_simpan_jadwal');
            let selectGuru = document.getElementById('select_guru');
            let selectGuruMapel = document.getElementById('select_guru_mapel');
            let inputJamMulai = document.getElementById('input_jam_mulai');
            let inputJamSelesai = document.getElementById('input_jam_selesai');
            let textKeterangan = document.getElementById('text_keterangan');
            let inputKeterangan = document.getElementById('input_keterangan'); 
            let selectTargetGenderDisplay = document.getElementById('select_target_gender_display');
            let inputTargetGenderReal = document.getElementById('select_target_gender');

            if(!selectedData) {
                if(boxMapel) boxMapel.style.display = 'none'; 
                if(boxGender) boxGender.style.display = 'none'; 
                if(infoNonMapel) infoNonMapel.classList.add('d-none');
                if(btnSimpan) btnSimpan.disabled = true; 
                if(selectGuru) selectGuru.required = false;
                if(selectGuruMapel) selectGuruMapel.required = false; 
                return;
            }

            if(inputJamMulai) inputJamMulai.value = selectedData.jam_mulai; 
            if(inputJamSelesai) inputJamSelesai.value = selectedData.jam_selesai;

            if(selectedData.is_mapel == 1 || selectedData.is_mapel == true) {
                if(infoNonMapel) infoNonMapel.classList.add('d-none'); 
                if(boxMapel) boxMapel.style.display = 'flex'; 
                if(boxGender) boxGender.style.display = 'block';
                
                if(selectGuru) selectGuru.required = true;
                if(selectGuruMapel) selectGuruMapel.required = true; 
                
                if(selectTargetGenderDisplay) selectTargetGenderDisplay.value = window.activeGenderUrl; 
                if(inputTargetGenderReal) inputTargetGenderReal.value = window.activeGenderUrl;
                if(inputKeterangan) inputKeterangan.value = ''; 
                if(btnSimpan) btnSimpan.disabled = false;
            } else {
                if(boxMapel) boxMapel.style.display = 'none'; 
                if(boxGender) boxGender.style.display = 'block'; 
                
                if(selectGuru) { selectGuru.required = false; selectGuru.value = ''; }
                if(selectGuruMapel) { selectGuruMapel.required = false; selectGuruMapel.value = ''; selectGuruMapel.disabled = true; }
                
                if(selectTargetGenderDisplay) selectTargetGenderDisplay.value = 'Campur'; 
                if(inputTargetGenderReal) inputTargetGenderReal.value = 'Campur';
                
                let ketValue = selectedData.keterangan || 'Waktu Istirahat';
                if(textKeterangan) textKeterangan.innerText = ketValue;
                if(inputKeterangan) inputKeterangan.value = ketValue; 
                
                if(infoNonMapel) infoNonMapel.classList.remove('d-none'); 
                if(btnSimpan) btnSimpan.disabled = false; 
            }
        }

        // JIKA ADMIN MEMILIH GURU (UNTUK MENGAMBIL MAPELNYA)
        if (e.target && e.target.id === 'select_guru') {
            let guruId = e.target.value;
            let selectGuruMapel = document.getElementById('select_guru_mapel');
            if (!selectGuruMapel) return;

            selectGuruMapel.innerHTML = '<option value="">-- Pilih Mapel --</option>';
            if (!guruId) {
                selectGuruMapel.disabled = true;
                return;
            }
            
            let filteredMapels = window.guruMapelsData.filter(gm => gm.guru_id == guruId);
            filteredMapels.forEach(gm => {
                selectGuruMapel.innerHTML += `<option value="${gm.id}">${gm.mapel.nama_mapel}</option>`;
            });
            selectGuruMapel.disabled = false;
        }
    });

    document.addEventListener('hidden.bs.modal', function (event) {
        if (event.target.id === 'modalTambahJadwal') {
            event.target.querySelector('form').reset();
            let boxKategori = document.getElementById('box_kategori');
            let boxWaktu = document.getElementById('box_waktu');
            let boxMapel = document.getElementById('box_mapel');
            let boxGender = document.getElementById('box_gender');
            let infoNonMapel = document.getElementById('info_non_mapel');
            let btnSimpan = document.getElementById('btn_simpan_jadwal');
            
            let selectKategori = document.getElementById('select_kategori');
            let selectAlokasi = document.getElementById('select_alokasi');
            let selectGuruMapel = document.getElementById('select_guru_mapel');

            if(boxKategori) boxKategori.style.display = 'none';
            if(boxWaktu) boxWaktu.style.display = 'none';
            if(boxMapel) boxMapel.style.display = 'none';
            if(boxGender) boxGender.style.display = 'none';
            if(infoNonMapel) infoNonMapel.classList.add('d-none');
            if(btnSimpan) btnSimpan.disabled = true;
            
            if(selectKategori) { selectKategori.innerHTML = '<option value="">-- Menunggu Hari... --</option>'; selectKategori.disabled = true; }
            if(selectAlokasi) { selectAlokasi.innerHTML = '<option value="">-- Pilih Kategori Dulu --</option>'; selectAlokasi.disabled = true; }
            if(selectGuruMapel) { selectGuruMapel.innerHTML = '<option value="">-- Menunggu Pilihan Guru --</option>'; selectGuruMapel.disabled = true; }
        }
    });

    document.addEventListener("DOMContentLoaded", function() {
        <?php if(session('success')): ?>
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: "<?php echo session('success'); ?>", showConfirmButton: false, timer: 2500 });
        <?php endif; ?>

        <?php if(session('info')): ?>
            Swal.fire({ icon: 'info', title: 'Informasi', text: "<?php echo session('info'); ?>", showConfirmButton: true });
        <?php endif; ?>

        <?php if($errors->any()): ?>
            let errs = [];
            <?php foreach($errors->all() as$error): ?>
                errs.push("<?php echo addslashes($error); ?>");
            <?php endforeach; ?>
            
            let htmlStr = '<ul class="text-start mb-0" style="font-size: 14px;">';
            errs.forEach(e => { htmlStr += '<li>' + e + '</li>'; });
            htmlStr += '</ul>';

            Swal.fire({ 
                icon: 'error', 
                title: 'Sistem Menolak!', 
                html: htmlStr,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Saya Mengerti'
            });
        <?php endif; ?>
    });
</script>
@endpush
@endsection
```

## File: `resources/views/admin/jadwal-mapel/sidebar.blade.php`
```php
{{-- resources/views/admin/jadwal-mapel/sidebar.blade.php --}}
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3 border-bottom">
        <h6 class="mb-0 fw-bold"><i class="bi bi-door-closed me-2 text-primary"></i>Pilih Kelas</h6>
    </div>
    <div class="card-body p-0">
        <div class="list-group list-group-flush" style="max-height: 700px; overflow-y:auto;">
            <?php if($jenjang->tingkats->count() > 0): ?>
                <?php foreach($jenjang->tingkats as $tingkat): ?>
                    <div class="bg-light px-3 py-2 fw-bold text-muted border-top border-bottom" style="font-size: 11px;">
                        TINGKAT <?php echo $tingkat->nama_tingkat; ?>
                    </div>
                    <?php if($tingkat->kelases->count() > 0): ?>
                        <?php foreach($tingkat->kelases as $kelas): ?>
                            <?php if($kelas->details->isEmpty()): ?>
                                <?php 
                                    $isUrlActive = false;
                                    if ($kelas_id == $kelas->id and request('gender', 'Campur') == 'Campur') {
                                        $isUrlActive = true;
                                    }
                                    $url = route('admin.jadwal-mapel.jenjang', ['jenjang_id' => $jenjang->id, 'kelas_id' => $kelas->id, 'gender' => 'Campur', 'tahun_ajaran_id' => $currentTaId, 'semester_id' => $currentSemId]);
                                ?>
                                <a href="<?php echo $url; ?>" class="list-group-item list-group-item-action py-2 <?php if($isUrlActive) echo 'active shadow-sm'; ?>">
                                   <div class="d-flex align-items-center" style="font-size: 12px; line-height: 1.2;">
                                       <i class="bi <?php echo ($kelas_id == $kelas->id) ? 'bi-door-open-fill' : 'bi-door-closed'; ?> me-2"></i> 
                                       <span>Kelas <?php echo $kelas->nama_kelas; ?> <small style="font-size: 10px;" class="opacity-75">(Campur)</small></span>
                                   </div>
                                </a>
                            <?php else: ?>
                                <?php foreach($kelas->details as $dtl): ?>
                                    <?php 
                                        $gName = $dtl->gender->nama_gender ?? '';
                                        $gAlias = 'Campur';
                                        
                                        if (in_array($gName, ['Laki-laki', 'Putra'])) {
                                            $gAlias = 'Putra';
                                        } elseif (in_array($gName, ['Perempuan', 'Putri'])) {
                                            $gAlias = 'Putri';
                                        }

                                        $isActive = false;
                                        if ($kelas_id == $kelas->id and request('gender') == $gAlias) {
                                            $isActive = true;
                                        }
                                        
                                        $iconColor = 'text-success';
                                        if ($gAlias == 'Putra') {
                                            $iconColor = 'text-primary';
                                        } elseif ($gAlias == 'Putri') {
                                            $iconColor = 'text-danger';
                                        }
                                        
                                        if($isActive) $iconColor = 'text-white';
                                        
                                        $url = route('admin.jadwal-mapel.jenjang', ['jenjang_id' => $jenjang->id, 'kelas_id' => $kelas->id, 'gender' => $gAlias, 'tahun_ajaran_id' => $currentTaId, 'semester_id' => $currentSemId]);
                                    ?>
                                    <a href="<?php echo $url; ?>" class="list-group-item list-group-item-action py-2 <?php if($isActive) echo 'active shadow-sm'; ?>">
                                       <div class="d-flex align-items-center px-1" style="font-size: 12px; line-height: 1.2;">
                                           <div class="<?php echo $isActive ? 'fw-bold' : 'text-dark'; ?>">
                                               <i class="bi <?php echo $isActive ? 'bi-door-open-fill' : 'bi-door-closed'; ?> me-2 <?php echo $iconColor; ?>"></i> 
                                               Kelas <?php echo $kelas->nama_kelas; ?> 
                                               <small style="font-size: 10px;" class="opacity-75 <?php echo $isActive ? 'text-white' : 'text-muted'; ?>">(<?php echo $gAlias; ?>)</small>
                                           </div>
                                       </div>
                                    </a>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="px-3 py-2 text-muted" style="font-size: 11px;"><i>Belum ada kelas</i></div>
                    <?php endif; ?>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="p-3 text-center text-muted" style="font-size: 12px;">Belum ada data tingkat/kelas.</div>
            <?php endif; ?>
        </div>
    </div>
</div>
```

## File: `resources/views/admin/jadwal-mapel/rekap.blade.php`
```php
{{-- resources/views/admin/jadwal-mapel/rekap.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Rekap Jam Mapel Guru')

@section('content')
<div class="container-fluid py-4">
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Rekap Jam Mengajar Guru</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">Pemantauan jumlah jam pelajaran (JP) per guru berdasarkan jenjang dan periode akademik.</p>
    </div>

    <!-- MENU DINAMIS JENJANG PENDIDIKAN -->
    @if(isset($jenjangs) && $jenjangs->count() > 0)
    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex flex-nowrap overflow-auto" role="tablist" style="scrollbar-width: none;">
            @foreach($jenjangs as $jm)
                <li class="nav-item flex-fill text-center" role="presentation">
                    <a class="nav-link w-100 mb-0 px-0 py-2 {{ $currentJenjang && $currentJenjang->id == $jm->id ? 'active fw-bold shadow-sm' : 'text-dark hover-bg-light' }}" 
                       href="{{ route('admin.jadwal-mapel.rekap', ['jenjang_id' => $jm->id, 'tahun_ajaran_id' => $currentTaId, 'semester_id' => $currentSemId]) }}"
                       style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-layers me-1"></i> {{ $jm->nama_jenjang }}
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- BOX FILTER PENCARIAN TAHUN AJARAN & SEMESTER -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-3">
            <form action="{{ route('admin.jadwal-mapel.rekap') }}" method="GET" class="row g-3 align-items-center">
                <!-- Hidden input untuk mempertahankan jenjang yang sedang dipilih -->
                <input type="hidden" name="jenjang_id" value="{{ $currentJenjang->id ?? '' }}">
                
                <div class="col-md-5">
                    <label class="form-label small fw-bold text-muted mb-1">Tahun Ajaran</label>
                    <select name="tahun_ajaran_id" class="form-select form-select-sm" onchange="this.form.submit()" style="cursor:pointer;">
                        @foreach($tahunAjarans as $ta)
                            <option value="{{ $ta->id }}" {{ $currentTaId == $ta->id ? 'selected' : '' }}>
                                {{ $ta->tahun_ajaran_hijriyah }} H ({{ $ta->tahun_ajaran }} M)
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label small fw-bold text-muted mb-1">Periode Semester</label>
                    <select name="semester_id" class="form-select form-select-sm" onchange="this.form.submit()" style="cursor:pointer;">
                        @if($semesters->count() > 0)
                            @foreach($semesters as $sem)
                                <option value="{{ $sem->id }}" {{ $currentSemId == $sem->id ? 'selected' : '' }}>{{ $sem->nama }}</option>
                            @endforeach
                        @else
                            <option value="">Belum Ada Periode</option>
                        @endif
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-filter"></i> Filter Data</button>
                </div>
            </form>
        </div>
    </div>

    <!-- KONTEN TABEL REKAP -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom py-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-table text-primary me-2"></i>Daftar Mapel: {{ $currentJenjang->nama_jenjang ?? '-' }}</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-bordered align-middle mb-0" style="font-size: 14px;">
                    <thead class="table-light">
                        <tr style="font-size: 13px;">
                            <th class="text-center" width="5%">NO</th>
                            <th width="30%">NAMA GURU</th>
                            <th width="35%">MATA PELAJARAN</th>
                            <th class="text-center" width="15%">JUMLAH JAM</th>
                            <th class="text-center" width="15%">TOTAL JAM PEKANAN</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rekapGurus as $index => $rekap)
                            @php $guru = $rekap['guru']; @endphp
                            <tr>
                                <td class="text-center text-muted align-middle">{{ $index + 1 }}</td>
                                
                                <!-- KOLOM NAMA GURU DENGAN FOTO PROFIL DAN NIP -->
                                <td class="align-middle">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ !empty($guru->foto) ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=100' }}" 
                                             class="rounded-circle object-fit-cover shadow-sm me-3 border" 
                                             style="width: 45px; height: 45px; aspect-ratio: 1/1;" 
                                             alt="Foto {{ $guru->nama_lengkap }}">
                                        
                                        <div>
                                            <span class="fw-bold text-primary d-block mb-1" style="font-size: 14px;">
                                                {{ $guru->nama_lengkap }}
                                            </span>
                                            <div class="text-muted" style="font-size: 11px;">
                                                <i class="bi bi-upc-scan me-1"></i> NIP: <strong class="text-dark">{{ $guru->nip ?? '-' }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                
                                <!-- KOLOM MATA PELAJARAN DENGAN GARIS PEMISAH -->
                                <td class="p-0 align-middle">
                                    @foreach($rekap['detail_mapels'] as $mapel)
                                        <div class="px-3 py-2 {{ !$loop->last ? 'border-bottom' : '' }}" style="font-size: 13.5px;">
                                            <i class="bi bi-book text-muted me-2"></i>{{ $mapel['nama_mapel'] }}
                                        </div>
                                    @endforeach
                                </td>
                                
                                <!-- KOLOM JUMLAH JAM DENGAN GARIS PEMISAH -->
                                <td class="p-0 text-center align-middle">
                                    @foreach($rekap['detail_mapels'] as $mapel)
                                        <div class="px-3 py-2 text-muted {{ !$loop->last ? 'border-bottom' : '' }}" style="font-size: 13.5px;">
                                            {{ $mapel['total_jam'] }} Jam
                                        </div>
                                    @endforeach
                                </td>

                                <td class="text-center align-middle fw-bold text-dark">
                                    {{ $rekap['total_jam'] }} JP
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="bi bi-calendar-x fs-1 d-block mb-2 opacity-50"></i>
                                    Belum ada data jadwal yang dialokasikan pada periode ini.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
```

