@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-person-badge me-1"></i> Guru</h5>
            <p class="mb-0 small text-white-50">Halaman manajemen data guru dan jabatannya</p>
        </div>
        <div class="card-body">
                @php
                $walikelasCount = \App\Models\Kelas::whereNotNull('walikelas_id')->distinct()->count('walikelas_id');
                $gurus = \App\Models\User::where('role', 'guru')->paginate(10);
            @endphp

            @php
                $activePeriode = \App\Models\Periode::where('status', \App\Models\Periode::STATUS_AKTIF)->first();
                $tahunPel = $activePeriode->tahun_pelajaran ?? '-';
                $semester = $activePeriode->semester ?? '-';
            @endphp

            <div class="mb-3">
                <h5 class="mb-1">Daftar Guru Walikelas dan Bukan Walikelas</h5>
                <div class="small text-muted">Tahun Pelajaran: <strong>{{ $tahunPel }}</strong> &nbsp;|&nbsp; Semester: <strong>{{ $semester }}</strong></div>
            </div>

            <div class="d-flex align-items-center gap-4 mb-3">
                <div>Jumlah guru: <strong>{{ $guruCount ?? $gurus->count() }}</strong></div>
                <div>Jumlah walikelas: <strong>{{ $walikelasCount }}</strong></div>
            </div>
            @include('admin.data-umum.guru.edit')
            @include('admin.data-umum.guru.detail')

            <div class="table-responsive">
                <table class="table table-bordered table-striped" style="table-layout: fixed;">
                    <thead>
                        <tr>
                            <th style="width:50px;">NO</th>
                            <th style="width:260px;">Nama</th>
                            <th style="width:160px;">NIK</th>
                            <th style="width:160px;">NIP</th>
                            <th style="width:120px;">Status</th>
                            <th style="width:90px;">Fase</th>
                            <th style="width:90px;">Tingkat</th>
                            <th style="width:90px;">Rombel</th>
                            <th style="width:180px;">Kelas</th>
                            <th style="width:140px;">Jabatan</th>
                            <th style="width:160px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($gurus as $index => $u)
                            @php
                                $k = \App\Models\Kelas::where('walikelas_id', $u->id)->first();
                                $g = \App\Models\Guru::where('user_id', $u->id)->first();
                                $displayNik = $g->nik ?? $u->nik ?? null;
                                $displayNip = $g->nip ?? $u->nip ?? null;
                                $displayStatus = $g->status ?? $u->status ?? null;
                            @endphp
                            <tr>
                                <td>{{ ($gurus->firstItem() ?? 0) + $loop->index }}</td>
                                <td>{{ $u->name }}</td>
                                <td>{{ $displayNik ?? '-' }}</td>
                                <td>{{ $displayNip ?? '-' }}</td>
                                <td>
                                    @if(!empty($displayStatus))
                                        @php $s = strtoupper($displayStatus); @endphp
                                        @if(in_array($s, ['ASN','P3K','HONORER','HONRER']))
                                            <span class="badge bg-primary">{{ $s }}</span>
                                        @else
                                            <span class="badge bg-secondary">{{ $displayStatus }}</span>
                                        @endif
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ optional($k)->fase ?? '-' }}</td>
                                <td>{{ optional($k)->tingkat ?? '-' }}</td>
                                <td>{{ optional($k)->rombel ?? '-' }}</td>
                                <td>{{ optional($k)->nama ?? '-' }}</td>
                                <td>{{ $k ? 'Walikelas' : 'Bukan walikelas' }}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-primary btn-edit-guru"
                                            data-id="{{ $u->id }}"
                                            data-name="{{ $u->name }}"
                                            data-nik="{{ $displayNik }}"
                                            data-nip="{{ $displayNip }}"
                                            data-status="{{ $displayStatus }}"
                                            data-bs-toggle="modal" data-bs-target="#editGuruModal" title="Edit">
                                        <i class="bi bi-pencil" aria-hidden="true"></i>
                                    </button>
                                        <button type="button" class="btn btn-sm btn-info btn-detail-guru"
                                            data-id="{{ $u->id }}"
                                            data-name="{{ $u->name }}"
                                            data-nik="{{ $displayNik }}"
                                            data-nip="{{ $displayNip }}"
                                            data-status="{{ $displayStatus }}"
                                            data-fase="{{ optional($k)->fase ?? '-' }}"
                                            data-tingkat="{{ optional($k)->tingkat ?? '-' }}"
                                            data-rombel="{{ optional($k)->rombel ?? '-' }}"
                                            data-kelas="{{ optional($k)->nama ?? '-' }}"
                                            data-jabatan="{{ $k ? 'Walikelas' : 'Bukan walikelas' }}"
                                            data-bs-toggle="modal" data-bs-target="#detailGuruModal">Detail</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="text-center">Belum ada data guru.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="d-flex justify-content-end mt-3">
                    {{ $gurus instanceof \Illuminate\Pagination\LengthAwarePaginator ? $gurus->links() : '' }}
                </div>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var editButtons = document.querySelectorAll('.btn-edit-guru');
                editButtons.forEach(function (btn) {
                    btn.addEventListener('click', function () {
                        var id = this.dataset.id;
                        var name = this.dataset.name || '';
                        var nik = this.dataset.nik || '';
                        var nip = this.dataset.nip || '';
                        var status = this.dataset.status || '';

                        document.getElementById('edit_guru_name').value = name;
                        document.getElementById('edit_guru_nik').value = nik;
                        document.getElementById('edit_guru_nip').value = nip;
                        document.getElementById('edit_guru_status').value = status;

                        var form = document.getElementById('editGuruForm');
                        form.action = '/admin/data-umum/guru/' + id;
                    });

                        var detailButtons = document.querySelectorAll('.btn-detail-guru');
                        detailButtons.forEach(function (btn) {
                            btn.addEventListener('click', function () {
                                document.getElementById('detail_name').textContent = this.dataset.name || '-';
                                document.getElementById('detail_nik').textContent = this.dataset.nik || '-';
                                document.getElementById('detail_nip').textContent = this.dataset.nip || '-';
                                document.getElementById('detail_status').textContent = this.dataset.status || '-';
                                document.getElementById('detail_fase').textContent = this.dataset.fase || '-';
                                document.getElementById('detail_tingkat').textContent = this.dataset.tingkat || '-';
                                document.getElementById('detail_rombel').textContent = this.dataset.rombel || '-';
                                document.getElementById('detail_kelas').textContent = this.dataset.kelas || '-';
                                document.getElementById('detail_jabatan').textContent = this.dataset.jabatan || '-';
                            });
                        });

                        // pagination navigator (uses built-in links below)
                });
            });
        </script>
@endsection