{{-- resources/views/admin/jadwal-mapel/rekap.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Rekap Jam Mapel Guru')

@section('content')
<div class="container-fluid py-4">
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Rekap Jam Mengajar Guru</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">Pemantauan jumlah jam pelajaran (JP) per guru berdasarkan jenjang dan periode akademik.</p>
    </div>

    @if(isset($jenjangs) && $jenjangs->count() > 0)
    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills p-1 bg-white border rounded-3 shadow-sm d-flex flex-nowrap overflow-auto" role="tablist" style="scrollbar-width: none;">
            @foreach($jenjangs as $jm)
                <li class="nav-item flex-fill text-center" role="presentation">
                    <a class="nav-link w-100 mb-0 px-0 py-2 {{ $currentJenjang && $currentJenjang->id == $jm->id ? 'active fw-bold shadow-sm' : 'text-dark hover-bg-light' }}" 
                       href="{{ route('admin.jadwal-mapel.rekap', ['jenjang_id' => $jm->id, 'tahun_ajaran_id' => $currentTaId, 'semester_id' => $currentSemId]) }}"
                       style="border-radius: 6px; font-size: 14px;">
                        <i class="bi bi-layers me-1"></i> {{ $jm->nama_jenjang }}
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-3">
            <form action="{{ route('admin.jadwal-mapel.rekap') }}" method="GET" class="row g-3 align-items-center">
                <input type="hidden" name="jenjang_id" value="{{ $currentJenjang->id ?? '' }}">
                
                <div class="col-md-5">
                    <label class="form-label small fw-bold text-muted mb-1">Tahun Ajaran</label>
                    <select name="tahun_ajaran_id" class="form-select form-select-sm" onchange="this.form.submit()" style="cursor:pointer;">
                        @foreach($tahunAjarans as $ta)
                            <option value="{{ $ta->id }}" {{ $currentTaId == $ta->id ? 'selected' : '' }}>
                                {{ $ta->tahun_ajaran_hijriyah }} H ({{ $ta->tahun_ajaran }} M)
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label small fw-bold text-muted mb-1">Periode Semester</label>
                    <select name="semester_id" class="form-select form-select-sm" onchange="this.form.submit()" style="cursor:pointer;">
                        @if($semesters->count() > 0)
                            @foreach($semesters as $sem)
                                <option value="{{ $sem->id }}" {{ $currentSemId == $sem->id ? 'selected' : '' }}>{{ $sem->nama }}</option>
                            @endforeach
                        @else
                            <option value="">Belum Ada Periode</option>
                        @endif
                    </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-filter"></i> Filter Data</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom py-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-table text-primary me-2"></i>Daftar Mapel: {{ $currentJenjang->nama_jenjang ?? '-' }}</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-bordered align-middle mb-0" style="font-size: 14px;">
                    <thead class="table-light">
                        <tr style="font-size: 13px;">
                            <th class="text-center" width="5%">NO</th>
                            <th width="30%">NAMA GURU</th>
                            <th width="35%">MATA PELAJARAN</th>
                            <th class="text-center" width="15%">JUMLAH JAM</th>
                            <th class="text-center" width="15%">TOTAL JAM PEKANAN</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rekapGurus as $index => $rekap)
                            @php $guru = $rekap['guru']; @endphp
                            <tr>
                                <td class="text-center text-muted align-middle">{{ $index + 1 }}</td>
                                
                                <td class="align-middle">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ !empty($guru->foto) ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=100' }}" 
                                             class="rounded-circle object-fit-cover shadow-sm me-3 border" 
                                             style="width: 45px; height: 45px; aspect-ratio: 1/1;" 
                                             alt="Foto {{ $guru->nama_lengkap }}">
                                        
                                        <div>
                                            <span class="fw-bold text-primary d-block mb-1" style="font-size: 14px;">
                                                {{ $guru->nama_lengkap }}
                                            </span>
                                            <div class="text-muted" style="font-size: 11px;">
                                                <i class="bi bi-upc-scan me-1"></i> NIP: <strong class="text-dark">{{ $guru->nip ?? '-' }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <td class="p-0 align-middle">
                                    @foreach($rekap['detail_mapels'] as $mapel)
                                        <div class="px-3 py-2 {{ !$loop->last ? 'border-bottom' : '' }}" style="font-size: 13.5px;">
                                            <i class="bi bi-book text-muted me-2"></i>{{ $mapel['nama_mapel'] }}
                                        </div>
                                    @endforeach
                                </td>
                                
                                <td class="p-0 text-center align-middle">
                                    @foreach($rekap['detail_mapels'] as $mapel)
                                        <div class="px-3 py-2 text-muted {{ !$loop->last ? 'border-bottom' : '' }}" style="font-size: 13.5px;">
                                            {{ $mapel['total_jam'] }} Jam
                                        </div>
                                    @endforeach
                                </td>

                                <td class="text-center align-middle fw-bold text-dark">
                                    {{ $rekap['total_jam'] }} JP
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="bi bi-calendar-x fs-1 d-block mb-2 opacity-50"></i>
                                    Belum ada data jadwal yang dialokasikan pada periode ini.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection