{{-- 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