@extends('admin.layout')

@section('title', '')

@section('content')
    <div class="card">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="bi bi-people me-1"></i> Peserta Didik</h5>
            <p class="mb-0 small text-white-50">Halaman manajemen peserta didik dalam kelompok kelas</p>
        </div>
        <div class="card-body">
            @php
                $activePeriode = \App\Services\PeriodeService::getActive();
            @endphp
            <div class="mb-3 d-flex justify-content-between align-items-start">
                <div>
                    <h6 class="mb-1">Daftar Peserta Didik</h6>
                    @if($activePeriode)
                        @php
                            $isTarget = trim($activePeriode->tahun_pelajaran) === '2025/2026' && trim($activePeriode->semester) === 'Ganjil';
                        @endphp
                        <small class="{{ $isTarget ? 'text-danger' : 'text-muted' }}">Tahun Pelajaran: @if($isTarget)<strong>{{ $activePeriode->tahun_pelajaran }}</strong>@else{{ $activePeriode->tahun_pelajaran }}@endif &middot; Semester: @if($isTarget)<strong>{{ $activePeriode->semester }}</strong>@else{{ $activePeriode->semester }}@endif</small>
                    @else
                        <small class="text-muted">Belum ada periode aktif</small>
                    @endif
                </div>
                <div class="d-flex align-items-start">
                    @if(!(auth()->check() && (auth()->user()->role ?? '') === 'guru'))
                        <div class="me-2">
                            <button class="btn btn-primary me-1 text-white" title="Download Template" data-bs-toggle="modal" data-bs-target="#templateFormatModal">
                                <i class="bi bi-download me-1"></i> Template
                            </button>
                            <button class="btn btn-success me-1 text-white" data-bs-toggle="modal" data-bs-target="#importPesertaModal" title="Import">
                                <i class="bi bi-upload me-1"></i> Import
                            </button>
                            <button class="btn btn-warning me-1" title="Export" data-bs-toggle="modal" data-bs-target="#exportFormatModal">
                                <i class="bi bi-box-arrow-up-right me-1"></i> Export
                            </button>
                        </div>
                        <div>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambahPesertaModal">Tambah Peserta Didik</button>
                        </div>
                        <div class="ms-3">
                            <form method="GET" action="{{ url()->current() }}" class="d-flex" style="gap:6px;">
                                <input type="hidden" name="kelas" value="{{ request()->query('kelas','') }}">
                                <input type="hidden" name="per_page" value="{{ request()->query('per_page',10) }}">
                                <input type="search" name="q" value="{{ request()->query('q','') }}" class="form-control form-control-sm" placeholder="Cari NIS / NISN" style="max-width:220px;">
                            </form>
                        </div>
                    @endif
                </div>
            </div>
            <div class="table-responsive">
                @if(!(auth()->check() && (auth()->user()->role ?? '') === 'guru'))
                    <div class="mb-2 d-flex align-items-center gap-2">
                        <div>
                            <select id="per_page_select" class="form-select form-select-sm" style="max-width:120px;">
                                @php $currentPer = request()->query('per_page', 10); @endphp
                                <option value="10" {{ $currentPer == 10 ? 'selected' : '' }}>10</option>
                                <option value="30" {{ $currentPer == 30 ? 'selected' : '' }}>30</option>
                                <option value="50" {{ $currentPer == 50 ? 'selected' : '' }}>50</option>
                            </select>
                        </div>

                        <form id="bulkDeleteForm" method="POST" action="{{ url('admin/data-umum/peserta-didik/bulk-delete') }}">
                            @csrf
                            <button type="submit" class="btn btn-danger btn-sm" id="bulkDeleteBtn">Hapus Terpilih</button>
                        </form>

                        @if(!empty($kelasList) && count($kelasList) > 0)
                            <div>
                                <select id="filter_kelas" class="form-select form-select-sm" style="max-width:220px;">
                                    <option value="">Semua Kelas</option>
                                    @foreach($kelasList as $k)
                                        <option value="{{ $k->nama }}" {{ request()->query('kelas') == $k->nama ? 'selected' : '' }}>{{ $k->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    </div>
                @endif
                <table class="table table-bordered table-striped" style="table-layout: fixed;">
                    <thead>
                        <tr>
                            @if(!(auth()->check() && (auth()->user()->role ?? '') === 'guru'))
                                <th style="width:40px;"><input type="checkbox" id="select_all"></th>
                            @endif
                            <th style="width:120px;">NIS</th>
                            <th style="width:120px;">NISN</th>
                            <th style="width:320px;">Nama Peserta Didik</th>
                            <th style="width:200px;">Nama Panggilan</th>
                            <th style="width:120px;">Jenis Kelamin</th>
                            <th style="width:120px;">Agama</th>
                            <th style="width:140px;">Tingkat Awal</th>
                            <th style="width:100px;">Fase</th>
                            <th style="width:100px;">Kelas</th>
                            <th style="width:140px;">Rombel</th>
                            <th style="width:140px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pesertas as $p)
                            <tr>
                                @if(!(auth()->check() && (auth()->user()->role ?? '') === 'guru'))
                                    <td class="text-center"><input type="checkbox" class="select_item" name="ids[]" value="{{ $p->id }}"></td>
                                @endif
                                <td>{{ $p->nis }}</td>
                                <td>{{ $p->nisn }}</td>
                                <td>{{ $p->nama_lengkap ?? $p->nama }}</td>
                                <td>{{ $p->nama_panggilan ?? $p->panggilan ?? '' }}</td>
                                <td>{{ $p->jenis_kelamin }}</td>
                                <td>{{ $p->agama }}</td>
                                <td>{{ $p->tingkat_awal ?? $p->tingkat ?? '' }}</td>
                                <td>{{ $p->fase ?? '' }}</td>
                                <td>{{ $p->kelas ?? $p->tingkat ?? '' }}</td>
                                <td>{{ $p->rombel ?? $p->rombels ?? '' }}</td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-primary btn-edit" 
                                        data-id="{{ $p->id }}"
                                        data-nis="{{ $p->nis }}"
                                        data-nisn="{{ $p->nisn }}"
                                        data-nama="{{ $p->nama }}"
                                        data-nama_panggilan="{{ $p->nama_panggilan }}"
                                        data-jenis_kelamin="{{ $p->jenis_kelamin }}"
                                        data-agama="{{ $p->agama }}"
                                        data-tingkat_awal="{{ $p->tingkat_awal }}"
                                        data-fase="{{ $p->fase }}"
                                        data-kelas="{{ $p->kelas }}"
                                        data-rombel="{{ $p->rombel }}"
                                        data-bs-toggle="modal" data-bs-target="#editPesertaModal" title="Edit">
                                        <i class="bi bi-pencil" aria-hidden="true"></i>
                                    </button>

                                    <form action="{{ url('admin/data-umum/peserta-didik/' . $p->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus peserta didik ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-sm btn-danger" title="Hapus">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="12" class="text-center">Belum ada data peserta didik.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                @if(!(auth()->check() && (auth()->user()->role ?? '') === 'guru'))
                @endif
            </div>

            <div class="d-flex justify-content-end mt-3">
                {{ $pesertas instanceof \Illuminate\Pagination\LengthAwarePaginator ? $pesertas->links() : '' }}
            </div>
            @if(!(auth()->check() && (auth()->user()->role ?? '') === 'guru'))
                @include('admin.data-umum.peserta-didik.create')
            @endif
            @include('admin.data-umum.peserta-didik.edit')
            @if(!(auth()->check() && (auth()->user()->role ?? '') === 'guru'))
                @includeIf('admin.data-umum.peserta-didik.import')
            @endif
            @includeIf('admin.data-umum.peserta-didik._template-modal')
            @includeIf('admin.data-umum.peserta-didik._export-modal')

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var editButtons = document.querySelectorAll('.btn-edit');
                    editButtons.forEach(function (btn) {
                        btn.addEventListener('click', function () {
                            var id = this.dataset.id;
                            document.getElementById('edit_nis').value = this.dataset.nis || '';
                            document.getElementById('edit_nisn').value = this.dataset.nisn || '';
                            document.getElementById('edit_nama').value = this.dataset.nama || '';
                            document.getElementById('edit_nama_panggilan').value = this.dataset.nama_panggilan || '';
                            document.getElementById('edit_jenis_kelamin').value = this.dataset.jenis_kelamin || '';
                            document.getElementById('edit_agama').value = this.dataset.agama || '';
                            document.getElementById('edit_tingkat_awal').value = this.dataset.tingkat_awal || '';
                            document.getElementById('edit_fase').value = this.dataset.fase || '';
                            document.getElementById('edit_kelas').value = this.dataset.kelas || '';
                            document.getElementById('edit_rombel').value = this.dataset.rombel || '';
                            var form = document.getElementById('editPesertaForm');
                            form.action = '/admin/data-umum/peserta-didik/' + id;
                        });
                    });
                });

                // bulk select and confirmation — avoid nested forms by collecting ids into the bulk form before submit
                document.addEventListener('DOMContentLoaded', function(){
                    var selectAll = document.getElementById('select_all');
                    if(selectAll){
                        selectAll.addEventListener('change', function(){
                            var items = document.querySelectorAll('.select_item');
                            items.forEach(function(i){ i.checked = selectAll.checked; });
                        });
                    }

                    var bulkForm = document.getElementById('bulkDeleteForm');
                    if(bulkForm){
                        bulkForm.addEventListener('submit', function(e){
                            // remove any previously appended inputs
                            bulkForm.querySelectorAll('.bulk-input').forEach(function(n){ n.remove(); });

                            var checked = document.querySelectorAll('.select_item:checked');
                            if(!checked || checked.length === 0){
                                alert('Pilih minimal satu peserta untuk dihapus.');
                                e.preventDefault();
                                return false;
                            }

                            if(!confirm('Yakin ingin menghapus ' + checked.length + ' peserta didik yang dipilih?')){
                                e.preventDefault();
                                return false;
                            }

                            checked.forEach(function(cb){
                                var inp = document.createElement('input');
                                inp.type = 'hidden';
                                inp.name = 'ids[]';
                                inp.value = cb.value;
                                inp.className = 'bulk-input';
                                bulkForm.appendChild(inp);
                            });
                        });
                    }
                });

                // kelas filter: change location with query param (no separate filter button)
                document.addEventListener('DOMContentLoaded', function(){
                    var kelasSelect = document.getElementById('filter_kelas');
                    if(kelasSelect){
                        kelasSelect.addEventListener('change', function(){
                            var val = this.value || null;
                            var url = new URL(window.location.href);
                            if(val){
                                url.searchParams.set('kelas', val);
                            } else {
                                url.searchParams.delete('kelas');
                            }
                            // reset to first page when changing filter
                            url.searchParams.delete('page');
                            window.location.href = url.toString();
                        });
                    }
                });

                // per-page selector
                document.addEventListener('DOMContentLoaded', function(){
                    var perPage = document.getElementById('per_page_select');
                    if(perPage){
                        perPage.addEventListener('change', function(){
                            var val = this.value || null;
                            var url = new URL(window.location.href);
                            if(val){
                                url.searchParams.set('per_page', val);
                            } else {
                                url.searchParams.delete('per_page');
                            }
                            // reset to first page when changing per-page
                            url.searchParams.delete('page');
                            window.location.href = url.toString();
                        });
                    }
                });
            </script>
        </div>
    </div>
@endsection