@extends('admin.layout')

@section('title','Perangkat Guru')

@section('content')
    <div class="card" style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04)">
        <div class="card-header" style="padding:12px 16px;border-bottom:1px solid #f1f1f1;font-weight:700;background:#fafafa;display:flex;align-items:center;gap:8px">
            <i class="bi bi-gear" style="margin-right:8px;color:var(--header-bg)"></i>
            <div style="display:flex;flex-direction:column">
                <span style="font-weight:700">Perangkat Guru</span>
                <span style="font-size:13px;color:#666">Pengaturan dan materi terkait guru: {{ $guru->name ?? '—' }}</span>
            </div>
        </div>
        <div class="card-body" style="padding:16px">
            <div style="display:flex;gap:12px;align-items:center;margin-bottom:16px">
                    <button type="button" class="perangkat-tab" data-target="modul" style="display:inline-block;padding:10px 14px;border-radius:6px;border:1px solid #e6e6e6;background:#fff;color:#333;cursor:pointer">Modul Ajar</button>
                    <button type="button" class="perangkat-tab" data-target="assesmen" style="display:inline-block;padding:10px 14px;border-radius:6px;border:1px solid #e6e6e6;background:#fff;color:#333;cursor:pointer">Assesmen</button>
                    <button type="button" class="perangkat-tab" data-target="sertifikat" style="display:inline-block;padding:10px 14px;border-radius:6px;border:1px solid #e6e6e6;background:#fff;color:#333;cursor:pointer">Sertifikat Pelatihan</button>
            </div>

                <div id="modul" class="perangkat-content" style="display:none">
                    <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">
                        <h3 style="margin:0 0 8px 0">Daftar Modul Ajar Guru</h3>
                        <div id="modul-list">
                            @if(isset($modules) && $modules->count())
                                <div style="overflow:auto;border:1px solid #f1f1f1;border-radius:6px">
                                    <table style="width:100%;border-collapse:collapse">
                                        <thead>
                                            <tr style="background:#f8f9fa;text-align:left">
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Kode</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Judul</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Fase</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Mata Pelajaran</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Jenjang</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Kelas</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Status</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Dibuat</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($modules as $m)
                                                <tr>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">
                                                        <a href="{{ route('admin.modul.preview', $m->id) }}?only=1" target="_blank" class="modul-kode-link" style="color:var(--header-bg);cursor:pointer" title="Klik untuk melihat/cetak modul ajar di tab baru">
                                                            {{ $m->kode_modul ?? '-' }}
                                                            <i class="bi bi-box-arrow-up-right" style="font-size:12px"></i>
                                                        </a>
                                                    </td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $m->judul ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $m->fase ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $m->mata_pelajaran ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $m->jenjang ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $m->kelas ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $m->status ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $m->created_at ? $m->created_at->format('Y-m-d') : '-' }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">Tidak ada modul ajar untuk guru ini.</div>
                            @endif
                        </div>
                    </div>
                </div>

                <div id="assesmen" class="perangkat-content" style="display:none">
                    <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">
                        <h3 style="margin:0 0 8px 0">Daftar Hasil Belajar Siswa</h3>
                        <div id="assesmen-list">
                            @if(isset($hasil_belajars) && count($hasil_belajars))
                                <div style="overflow-x:auto;border:1px solid #f1f1f1;border-radius:6px">
                                    <table style="min-width:1000px;width:100%;border-collapse:collapse;white-space:nowrap">
                                        <thead>
                                            <tr style="background:#f8f9fa;text-align:left">
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Tgl</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Tahun Pelajaran</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Semester</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Sekolah</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Jenjang</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Kelas</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Fase</th>
                                                <th style="padding:10px;border-bottom:1px solid #e9ecef">Dokumen</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($hasil_belajars as $h)
                                                <tr>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ isset($h->created_at) ? (\Illuminate\Support\Str::contains(gettype($h->created_at),'object') ? $h->created_at->format('Y-m-d') : (is_string($h->created_at)?substr($h->created_at,0,10):'-')) : '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $h->tahun_pelajaran ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $h->semester ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $h->sekolah_name ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $h->jenjang ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $h->kelas ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">{{ $h->fase ?? '-' }}</td>
                                                    <td style="padding:10px;border-top:1px solid #f1f1f1">@if(!empty($h->dokumen_path))<a href="{{ asset($h->dokumen_path) }}" target="_blank" style="color:var(--header-bg)">Lihat / Unduh</a>@else - @endif</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">Tidak ada hasil belajar untuk guru ini.</div>
                            @endif
                        </div>
                    </div>
                </div>

                <div id="sertifikat" class="perangkat-content" style="display:none">
                    <div style="padding:12px;border:1px solid #e9ecef;border-radius:6px;background:#fff">
                        <h3 style="margin:0 0 8px 0">Daftar Setifikat Pelatihan Guru</h3>
                        <div id="sertifikat-list">
                            <!-- Daftar sertifikat pelatihan guru akan ditampilkan di sini -->
                        </div>
                    </div>
                </div>

                <script>
                    (function(){
                        var tabs = document.querySelectorAll('.perangkat-tab');
                        function hideAll(){
                            var contents = document.querySelectorAll('.perangkat-content');
                            contents.forEach(function(c){ c.style.display = 'none'; });
                        }
                        tabs.forEach(function(t){
                            t.addEventListener('click', function(e){
                                var target = t.getAttribute('data-target');
                                if(!target) return;
                                hideAll();
                                var el = document.getElementById(target);
                                if(el) el.style.display = 'block';
                            });
                        });
                        // Optionally, show Modul Ajar by default
                        // document.querySelector('.perangkat-tab[data-target="modul"]').click();
                    })();
                </script>

                <style>
                    .modul-kode-link {
                        text-decoration: underline;
                        font-weight: 600;
                        transition: all 0.2s ease;
                        display: inline-flex;
                        align-items: center;
                        gap: 4px;
                    }
                    
                    .modul-kode-link:hover {
                        opacity: 0.8;
                        text-decoration-thickness: 2px;
                    }
                    
                    .modul-kode-link:active {
                        transform: scale(0.98);
                    }
                </style>

            

            @if($sekolah)
                <div style="margin-top:12px;padding:12px;border:1px dashed #e9ecef;border-radius:6px;background:#fafafa;color:#555">Sekolah: {{ $sekolah->nama_sekolah }} ({{ $sekolah->jenjang }})</div>
            @endif
        </div>
    </div>
@endsection