{{-- resources/views/admin/keuangan/pengaturan/_tab_siswa_jenis.blade.php --}}

<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 gap-3">
    <form action="{{ route('admin.pengaturan-keuangan.index') }}" method="GET" class="d-flex align-items-center gap-2 m-0 p-0">
        <input type="hidden" name="tab" value="siswa-jenis">

        <select name="filter_ta" class="form-select form-select-sm" style="min-width: 150px;" onchange="this.form.submit()">
            <option value="">-- Semua T.A --</option>
            @foreach($tahunAjarans as $ta)
                <option value="{{ $ta->id }}" {{ $filterTa == $ta->id ? 'selected' : '' }}>
                    {{ $ta->tahun_ajaran }}
                </option>
            @endforeach
        </select>

        <select name="filter_sem" class="form-select form-select-sm" style="min-width: 130px;" onchange="this.form.submit()">
            <option value="">-- Semua Smt --</option>
            @foreach($allSemesters as $sem)
                <option value="{{ $sem->id }}" {{ $filterSem == $sem->id ? 'selected' : '' }}>
                    {{ $sem->semester }}
                </option>
            @endforeach
        </select>
        
    </form>

    <button class="btn btn-primary btn-round shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambahJenisSiswa">
        <i class="fa fa-plus me-1"></i> Tambah Pembayaran
    </button>
</div>

<div class="table-responsive border rounded bg-white shadow-sm">
    <table class="table table-striped table-hover align-middle mb-0">
        <thead class="table-dark text-center">
            <tr>
                <th width="5%">No</th>
                <th>Nama Pembayaran</th>
                <th width="25%">Berlaku Untuk Kelas</th>
                <th>Nominal</th>
                <th>T.A & Semester</th>
                <th width="12%">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($jenisSiswa as $item)
                <tr class="text-center">
                    <td>{{ ($jenisSiswa->currentPage()-1) * $jenisSiswa->perPage() + $loop->iteration }}</td>
                    <td class="text-start fw-bold">
                        {{ $item->nama_jenis }}<br>
                        <small class="text-muted"><i class="fa fa-tag me-1"></i>{{ $item->kategori_jenis }}</small>
                    </td>
                    <td class="text-start">
                        @if(empty($item->kelas_id))
                            <span class="badge bg-success"><i class="fa fa-check-double me-1"></i>Semua Kelas</span>
                        @else
                            @php
                                $namaKelas = $allKelas->whereIn('id', $item->kelas_id)->map(function($k) {
                                    return $k->rombel->nama_rombel ?? ('ID:'.$k->id);
                                })->implode(', ');
                            @endphp
                            <span class="text-primary fw-bold" style="font-size: 0.85rem;">{{ $namaKelas }}</span>
                        @endif
                    </td>
                    <td class="text-end fw-bold text-success">
                        Rp {{ number_format($item->nominal, 0, ',', '.') }}
                    </td>
                    <td>
                        <span class="badge badge-info mb-1">{{ $item->tahunAjaran?->tahun_ajaran ?? 'N/A' }}</span><br>
                        <span class="badge border border-secondary text-secondary">{{ $item->semester?->semester ?? 'N/A' }}</span>
                    </td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalEditJenisSiswa-{{ $item->id }}" title="Edit">
                                <i class="fa fa-edit"></i>
                            </button>
                            <form action="{{ route('admin.keuangan-siswa-jenis.destroy', $item->id) }}" method="POST" class="d-inline">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Hapus data ini?')" title="Hapus"><i class="fa fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="text-center py-5 text-muted">
                        <i class="fa fa-folder-open fa-3x mb-3 op-3"></i><br>
                        Belum ada data pembayaran untuk Tahun Ajaran / Semester ini.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-3 d-flex justify-content-end">
    {{ $jenisSiswa->appends(['jenis_siswa_page' => $jenisSiswa->currentPage()])->links('pagination::bootstrap-5') }}
</div>

<div class="modal fade" id="modalTambahJenisSiswa" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Tambah Jenis Pembayaran Baru</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" action="{{ route('admin.keuangan-siswa-jenis.store') }}">
        @csrf
        <div class="modal-body">
          
          <div class="mb-3">
            <label class="form-label">Tahun Ajaran <span class="text-danger">*</span></label>
            <select class="form-select select-tahun-ajaran" name="tahun_ajaran_id" required>
              <option value="" disabled selected>-- Pilih Tahun Ajaran --</option>
              @foreach($tahunAjarans as $ta)
                <option value="{{ $ta->id }}">{{ $ta->tahun_ajaran }} {{ $ta->is_active ? '(Aktif)' : '' }}</option>
              @endforeach
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Semester <span class="text-danger">*</span></label>
            <select class="form-select select-semester" name="semester_id" required disabled>
              <option value="" disabled selected>-- Pilih Tahun Ajaran Terlebih Dahulu --</option>
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Berlaku Untuk Kelas <span class="text-danger">*</span></label>
            <div class="border rounded p-3 bg-light checkbox-container" data-selected="[]" style="max-height: 250px; overflow-y: auto;">
                <div class="text-muted small fst-italic">Pilih Semester terlebih dahulu...</div>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">Nama Pembayaran <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="nama_jenis" required placeholder="Contoh: SPP Bulanan">
          </div>
          <div class="row">
              <div class="col-md-6 mb-3">
                <label class="form-label">Kategori <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="kategori_jenis" required placeholder="Contoh: Iuran Wajib">
              </div>
              <div class="col-md-6 mb-3">
                <label class="form-label">Nominal (Rp) <span class="text-danger">*</span></label>
                <input type="number" class="form-control" name="nominal" required>
              </div>
          </div>
          <div class="mb-3">
            <label class="form-label">Keterangan</label>
            <textarea class="form-control" name="keterangan" rows="2"></textarea>
          </div>
        </div>
        <div class="modal-footer bg-light border-top-0">
          <button type="button" class="btn btn-secondary btn-round" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary btn-round shadow-sm"><i class="fa fa-save me-1"></i> Simpan Data</button>
        </div>
      </form>
    </div>
  </div>
</div>

@foreach ($jenisSiswa as $item)
<div class="modal fade" id="modalEditJenisSiswa-{{ $item->id }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit: {{ $item->nama_jenis }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" action="{{ route('admin.keuangan-siswa-jenis.update', $item->id) }}">
        @csrf @method('PUT')
        <div class="modal-body">
          
          <div class="mb-3">
            <label class="form-label">Tahun Ajaran <span class="text-danger">*</span></label>
            <select class="form-select select-tahun-ajaran select-tahun-ajaran-edit" name="tahun_ajaran_id" required>
              @foreach($tahunAjarans as $ta)
                <option value="{{ $ta->id }}" {{ $item->tahun_ajaran_id == $ta->id ? 'selected' : '' }}>
                    {{ $ta->tahun_ajaran }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Semester <span class="text-danger">*</span></label>
            <select class="form-select select-semester" name="semester_id" required disabled data-preselected="{{ $item->semester_id }}">
              <option value="" disabled selected>Memuat semester...</option>
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Berlaku Untuk Kelas <span class="text-danger">*</span></label>
            <div class="border rounded p-3 bg-light checkbox-container" data-selected="{{ json_encode($item->kelas_id ?? []) }}" style="max-height: 250px; overflow-y: auto;">
                <div class="text-muted small fst-italic">Memuat data kelas...</div>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">Nama Pembayaran <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="nama_jenis" value="{{ $item->nama_jenis }}" required>
          </div>
          <div class="row">
              <div class="col-md-6 mb-3">
                <label class="form-label">Kategori <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="kategori_jenis" value="{{ $item->kategori_jenis }}" required>
              </div>
              <div class="col-md-6 mb-3">
                <label class="form-label">Nominal (Rp) <span class="text-danger">*</span></label>
                <input type="number" class="form-control" name="nominal" value="{{ (int)$item->nominal }}" required>
              </div>
          </div>
          <div class="mb-3">
            <label class="form-label">Keterangan</label>
            <textarea class="form-control" name="keterangan" rows="2">{{ $item->keterangan }}</textarea>
          </div>

        </div>
        <div class="modal-footer bg-light border-top-0">
          <button type="button" class="btn btn-secondary btn-round" data-bs-dismiss="modal">Batal</button>
          <button type="submit" class="btn btn-primary btn-round shadow-sm"><i class="fa fa-save me-1"></i> Simpan Perubahan</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endforeach

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        
        const romanMap = { 'I':1, 'II':2, 'III':3, 'IV':4, 'V':5, 'VI':6, 'VII':7, 'VIII':8, 'IX':9, 'X':10, 'XI':11, 'XII':12 };
        const allSemestersData = @json($allSemesters); 
        
        function getLevel(namaRombel) {
            let match = namaRombel.match(/^(VII|VIII|IX|X|XI|XII|VI|V|IV|III|II|I)\b/i);
            return match ? romanMap[match[1].toUpperCase()] : 99;
        }

        function fetchClassesAPI(tahunAjaranId, modal) {
            const semesterSelect = modal.querySelector('.select-semester');
            const container = modal.querySelector('.checkbox-container');
            
            semesterSelect.innerHTML = '<option value="" disabled selected>Memuat semester...</option>';
            semesterSelect.disabled = true;
            container.innerHTML = '<div class="text-muted small">Pilih Semester terlebih dahulu...</div>';
            
            if(!tahunAjaranId) return;

            fetch(`{{ url('/api/kelas-by-tahun-ajaran') }}/${tahunAjaranId}`)
                .then(r => r.json())
                .then(responseData => {
                    let rawItems = Array.isArray(responseData) ? responseData : (responseData.data || Object.values(responseData));
                    
                    modal.setAttribute('data-classes', JSON.stringify(rawItems));

                    let semOptions = '<option value="" disabled selected>-- Pilih Semester --</option>';
                    allSemestersData.forEach(sem => {
                        semOptions += `<option value="${sem.id}">${sem.semester}</option>`;
                    });
                    semesterSelect.innerHTML = semOptions;
                    semesterSelect.disabled = false;

                    const preselectedSem = semesterSelect.getAttribute('data-preselected');
                    if(preselectedSem) {
                        semesterSelect.value = preselectedSem;
                        renderClassesCheckbox(modal); 
                    }
                })
                .catch(err => {
                    semesterSelect.innerHTML = '<option value="" disabled selected>Gagal memuat API</option>';
                    container.innerHTML = '<div class="text-danger small">Gagal terhubung ke API.</div>';
                });
        }

        function renderClassesCheckbox(modal) {
            const container = modal.querySelector('.checkbox-container');
            const semesterId = modal.querySelector('.select-semester').value;
            const rawClasses = modal.getAttribute('data-classes');
            
            if(!semesterId || !rawClasses) return;

            const selectedIds = JSON.parse(container.getAttribute('data-selected') || '[]').map(String);
            const allClasses = JSON.parse(rawClasses);
            
            let items = allClasses.filter(c => c.semester_id == semesterId);

            if(items.length === 0) {
                container.innerHTML = '<div class="text-danger small fw-bold">Tidak ada kelas untuk semester ini.</div>';
                return;
            }

            items.sort((a, b) => {
                let nameA = a.rombel && a.rombel.nama_rombel ? a.rombel.nama_rombel : '';
                let nameB = b.rombel && b.rombel.nama_rombel ? b.rombel.nama_rombel : '';
                let lvlA = getLevel(nameA);
                let lvlB = getLevel(nameB);
                if (lvlA !== lvlB) return lvlA - lvlB; 
                return nameA.localeCompare(nameB); 
            });

            let isAllChecked = selectedIds.length === 0 ? 'checked' : '';
            let html = `
                <div class="form-check mb-3 border-bottom border-primary pb-2">
                    <input class="form-check-input border-primary cb-semua" type="checkbox" id="cb_semua_${semesterId}" ${isAllChecked}>
                    <label class="form-check-label fw-bold text-primary" for="cb_semua_${semesterId}" style="cursor: pointer;">
                        ✅ Berlaku Untuk Semua Kelas (Di Semester Ini)
                    </label>
                </div>
                <div class="px-2">
            `;

            items.forEach(kelas => {
                let kelasIdStr = kelas.id.toString();
                let isChecked = selectedIds.includes(kelasIdStr) ? 'checked' : '';
                let disabledAttr = isAllChecked ? 'disabled' : '';
                let namaRombel = kelas.rombel && kelas.rombel.nama_rombel ? kelas.rombel.nama_rombel : ('Kelas ID: ' + kelas.id);
                
                html += `
                    <div class="form-check mb-2">
                        <input class="form-check-input border-secondary cb-individu" type="checkbox" name="kelas_id[]" value="${kelas.id}" id="cb_kelas_${kelas.id}" ${isChecked} ${disabledAttr}>
                        <label class="form-check-label fw-bold text-dark" for="cb_kelas_${kelas.id}" style="cursor: pointer;">
                            ${namaRombel}
                        </label>
                    </div>
                `;
            });
            html += `</div>`;
            container.innerHTML = html;

            const cbSemua = container.querySelector('.cb-semua');
            const cbIndividuList = container.querySelectorAll('.cb-individu');

            cbSemua.addEventListener('change', function() {
                cbIndividuList.forEach(cb => { 
                    if(this.checked) cb.checked = false;
                    cb.disabled = this.checked; 
                });
            });

            cbIndividuList.forEach(cb => {
                cb.addEventListener('change', function() {
                    if(this.checked) cbSemua.checked = false;
                });
            });
        }

        document.querySelectorAll('.select-tahun-ajaran').forEach(select => {
            select.addEventListener('change', function() {
                const modal = this.closest('.modal');
                modal.querySelector('.checkbox-container').setAttribute('data-selected', '[]'); 
                modal.querySelector('.select-semester').setAttribute('data-preselected', '');
                fetchClassesAPI(this.value, modal);
            });
        });

        document.querySelectorAll('.select-semester').forEach(select => {
            select.addEventListener('change', function() {
                const modal = this.closest('.modal');
                modal.querySelector('.checkbox-container').setAttribute('data-selected', '[]'); 
                renderClassesCheckbox(modal);
            });
        });

        document.querySelectorAll('.select-tahun-ajaran-edit').forEach(select => {
            if(select.value) {
                fetchClassesAPI(select.value, select.closest('.modal'));
            }
        });
    });
</script>
@endpush