{{-- resources/views/admin/siswa/index.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'Data 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">
        <div>
            <h4 class="mb-1 fw-bold">
                Data Induk Siswa 
                @if($jenjang && $tingkat)
                    - {{ $jenjang->nama_jenjang }} (Tingkat {{ $tingkat->nama_tingkat }})
                @endif
            </h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola data profil, akademik, dan administrasi siswa madrasah khusus tingkat ini.</p>
        </div>
        <div class="d-flex gap-2">
            @if($jenjang && $tingkat)
                <button type="button" class="btn btn-success btn-sm d-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalImportData">
                    <i class="bi bi-file-earmark-excel"></i> Import Excel
                </button>
            @endif
            
            <a href="{{ route('admin.siswa.create') }}" class="btn btn-primary btn-sm d-flex align-items-center gap-2 shadow-sm">
                <i class="bi bi-person-plus"></i> Tambah Siswa
            </a>
        </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 $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if($jenjang && $tingkat)
        @php
            $daftarKelas = \App\Models\Kelas::with('details.gender')
                            ->where('tingkat_kelas_id', $tingkat->id)
                            ->orderBy('nama_kelas', 'asc')
                            ->get();
                            
            $taAktifTbl = \App\Models\TahunAjaran::where('status_akademik', 'aktif')->first();
            $taIdForm = $selectedTaId ?? ($taAktifTbl->id ?? null);
        @endphp

        @if($daftarKelas->isEmpty())
            <div class="alert alert-info border-0 shadow-sm d-flex align-items-center bg-white">
                <i class="bi bi-info-circle fs-4 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 data kelas yang didaftarkan untuk Tingkat {{ $tingkat->nama_tingkat }}. Silakan tambahkan kelas terlebih dahulu.</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)
                        @php
                            $jmlSiswaKelas = $siswas->where('kelas_id', $kelas->id)->count();
                        @endphp
                        <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" id="kelas-{{ $kelas->id }}-tab" 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">{{ $jmlSiswaKelas }}</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" id="subKelasTab-{{ $kelas->id }}" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="sub-all-{{ $kelas->id }}-tab" 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';
                                            }
                                        }
                                        
                                        $siswaDetail = $siswas->where('kelas_id', $kelas->id)->where('jenis_kelamin', $valDB);
                                    @endphp
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="sub-{{ $detail->id }}-tab" data-bs-toggle="pill" data-bs-target="#sub-{{ $detail->id }}" type="button" role="tab">
                                            Slot {{ $detail->gender->nama_gender ?? 'Campuran' }} ({{ $siswaDetail->count() }})
                                        </button>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="tab-content" id="subKelasTabContent-{{ $kelas->id }}">
                                <div class="tab-pane fade show active" id="sub-all-{{ $kelas->id }}" role="tabpanel">
                                    @include('admin.siswa.table', ['dataSiswa' => $siswas->where('kelas_id', $kelas->id), 'namaKelas' => $kelas->nama_kelas, 'tingkat' => $tingkat])
                                </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';
                                            }
                                        }
                                        $siswaDetail = $siswas->where('kelas_id', $kelas->id)->where('jenis_kelamin', $valDB);
                                    @endphp
                                    <div class="tab-pane fade" id="sub-{{ $detail->id }}" role="tabpanel">
                                        @include('admin.siswa.table', ['dataSiswa' => $siswaDetail, 'namaKelas' => $kelas->nama_kelas . ' (Slot ' . ($detail->gender->nama_gender ?? '') . ')', 'tingkat' => $tingkat])
                                    </div>
                                @endforeach
                            </div>
                        @else
                            @include('admin.siswa.table', ['dataSiswa' => $siswas->where('kelas_id', $kelas->id), 'namaKelas' => $kelas->nama_kelas, 'tingkat' => $tingkat])
                        @endif

                    </div>
                @endforeach
            </div>

            <div class="modal fade" id="modalImportData" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <form action="{{ route('admin.siswa.import') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="tingkat_id" value="{{ $tingkat->id }}">
                        <input type="hidden" name="tahun_ajaran_id" value="{{ $taIdForm }}">

                        <div class="modal-content border-0 shadow">
                            <div class="modal-header bg-success text-white border-bottom-0 pb-3">
                                <h5 class="modal-title fw-bold"><i class="bi bi-file-earmark-excel me-2"></i>Import Data Siswa Massal</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="alert alert-info border-0 shadow-sm" style="font-size: 13px;">
                                    <strong><i class="bi bi-info-circle-fill me-1"></i> Logika Drill-Down Aktif:</strong><br>
                                    Anda sedang berada di jenjang <b>{{ $jenjang->nama_jenjang }}</b> tingkat <b>{{ $tingkat->nama_tingkat }}</b>. Semua siswa yang di-import melalui form ini akan divalidasi ke tingkat ini pada Tahun Ajaran yang sedang dipilih di filter atas.
                                </div>

                                <div class="mb-4 p-3 bg-light rounded border border-success" style="--bs-border-opacity: .3;">
                                    <h6 class="fw-bold text-success mb-2">Langkah 1: Unduh Format Template Excel</h6>
                                    <p class="text-muted mb-3" style="font-size: 13px;">
                                        Sistem memerlukan file Excel (.xls) dengan kolom yang presisi. Silakan unduh template resmi di bawah ini. (Template ini sudah disesuaikan dengan Tingkat yang sedang Anda buka).
                                    </p>
                                    
                                    <a href="{{ route('admin.siswa.template-import', ['tingkat_id' => $tingkat->id]) }}" class="btn btn-outline-success btn-sm fw-bold">
                                        <i class="bi bi-cloud-download me-1"></i> Unduh Template Excel (.xls)
                                    </a>
                                    
                                    <hr class="my-3 opacity-25">
                                    <p class="mb-1 fw-bold text-dark" style="font-size: 12px;">Panduan Kolom Hierarki Kelas (Kuning):</p>
                                    <ul class="text-muted mb-0 ps-3" style="font-size: 12px;">
                                        <li><b>Tingkat Kelas:</b> Harus diisi sesuai dengan tingkat saat ini (misal: <code>{{ $tingkat->nama_tingkat }}</code>). Jika berbeda, baris akan ditolak.</li>
                                        <li><b>Ruang Kelas:</b> Masukkan nama kelas secara pasti (Contoh: <code>A</code>, <code>B</code>, atau <code>1</code>).</li>
                                        <li><b>Target Slot Gender:</b> Tuliskan <code>Putra</code>, <code>Putri</code>, atau <code>Campuran</code> menyesuaikan pengaturan ruang kelas yang Anda buat sebelumnya.</li>
                                    </ul>
                                </div>

                                <div class="mb-2">
                                    <h6 class="fw-bold text-dark mb-2">Langkah 2: Unggah File Excel</h6>
                                    <label class="form-label fw-medium text-muted" style="font-size: 13px;">Pilih file Excel yang sudah diisi <span class="text-danger">*</span></label>
                                    <input type="file" name="file_import" class="form-control border-success" accept=".xls" required>
                                    <div class="form-text" style="font-size: 12px;">Maksimal 5MB. Duplikasi NISN akan otomatis dilewati oleh sistem.</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-success fw-bold px-4">
                                    <i class="bi bi-upload me-1"></i> Mulai Import Data
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        @endif
        
    @else
        <div class="alert alert-warning border-0 shadow-sm bg-white">
            <i class="bi bi-exclamation-triangle me-2 text-warning"></i> Konfigurasi Jenjang dan Tingkat Kelas belum tersedia. Silakan lengkapi Master Data Anda.
        </div>
    @endif
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus ' + nama + '?',
            text: "Semua data profil dan berkas dokumen terkait siswa ini akan ikut terhapus 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: true });
        @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>', showConfirmButton: true });
        @endif
    });
</script>
@endpush
@endsection