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